const timeUtcSpan = document.querySelector("#time-utc");
const scheduleTable = document.querySelector("#schedule-table");
const scheduleForm = document.querySelector("#schedule-form");

timeUtcSpan.innerText = new Date()
    .toUTCString()
    .slice(17, 22);
// .toLocaleTimeString(["en-UK"], { hour: "2-digit", minute: "2-digit" });

const weekDayNames = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
];

const monthNames = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December",
];

const utcWeekDayName = (utcDate) => weekDayNames[utcDate.getUTCDay()];
const utcDayOfMonth = (utcDate) => utcDate.getUTCDate();
const utcMonthName = (utcDate) => monthNames[utcDate.getUTCMonth()];

const utcDateFromString = (dateString) =>
    new Date(
        new Date(dateString).getTime() -
            new Date().getTimezoneOffset() * 60 * 1000,
    );

async function makeScheduleTable() {
    const timeslotData = await fetch("timeslots.json")
        .then((res) => res.json());

    const timeslots = timeslotData
        .map(({ date, times }) => ({
            dateString: date,
            date: utcDateFromString(date),
            times,
        }));

    timeslots.sort((a, b) => a.date.getTime() - b.date.getTime());

    let tableHtml = `<tr>
        ${
        timeslots.map((ts) =>
            `<th>${utcWeekDayName(ts.date)} ${utcDayOfMonth(ts.date)}. ${
                utcMonthName(ts.date)
            }</th>`
        )
            .join("")
    }
    </tr>`;

    tableHtml += "<tr>";
    for (const timeslot of timeslots) {
        tableHtml += "<td>";
        for (const time of timeslot.times) {
            const name = `${timeslot.dateString}-${time}`;
            tableHtml += `
                <div>
                    <input type="checkbox" name="${name}" id="checkbox-${name}">
                    <label for="checkbox-${name}">${time}</label>
                </div>
            `;
        }
        tableHtml += "</td>";
    }
    tableHtml += "</tr>";

    scheduleTable.innerHTML = tableHtml;
}

scheduleForm.onsubmit = async (ev) => {
    ev.preventDefault();
    const formdata = new FormData(ev.target);
    const data = [...formdata]
        .reduce((acc, [key, val]) => ({ ...acc, [key]: val }), {});
    if (!data.username) {
        alert("please specify username");
        return;
    }
    if (!data.tos) {
        alert("please check information agreement");
        return;
    }

    const response = await fetch("/api/log", {
        method: "post",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(data),
    }).then((res) => res.json());

    if (response.ok) {
        alert("submitted!");
    } else {
        alert("error occured!");
        console.log(response);
    }
};

makeScheduleTable();