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 = [
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
    "Sunday",
];

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

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

    const timeslots = timeslotData
        .map(({ date, times }) => ({
            dateString: date,
            // yea soo this hack makes the Date UTC
            date: new Date(
                new Date(date).getTime() -
                    new Date().getTimezoneOffset() * 60 * 1000,
            ),
            times,
        }))
        .toSorted((a, b) => a.date.getTime() - b.date.getTime());

    let tableHtml = `<tr>
        ${
        timeslots.map((ts) =>
            `<th>${
                weekDayNames[ts.date.getUTCDay()]
            } ${ts.date.getUTCDate()}. ${
                monthNames[ts.date.getUTCMonth()]
            }</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;
    }
    console.log(data);

    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();