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;
}

function initScheduler() {
    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();
}

if (scheduleTable !== null && scheduleForm !== null) {
    initScheduler();
}