"use strict";

import {fetchRegular, getTimeSpan, parseOrRedirect} from "./utils.js";

let appointment;
const errorParagraph = document.getElementById('appointment-error');
const successParagraph = document.getElementById('appointment-success');


window.addEventListener("load", async function () {
    document.getElementById("btn-attend").addEventListener("click", async () => {
        await attendEvent();
    })
    const urlParams = new URLSearchParams(window.location.search);
    appointment = urlParams.get('appointment');
    if (!appointment) {
        window.location.replace("/html/404.html");
    }

    await getAppointment();
});

async function getAppointment() {
    let options = {method: 'GET', headers: {'User-Agent': 'insomnia/10.0.0'}};

    const searchParams = new URLSearchParams({
        appointmentId: appointment,

    });

    const response = await fetchRegular('/api/schedule?' + searchParams.toString(), options)
        .catch(err => console.error('error:' + err));

    const js = await parseOrRedirect(response);
    displayAppointmentDetails(js);
}

function displayAppointmentDetails(appointment) {
    // Update the innerHTML of the elements to display the appointment details
    document.getElementById('appointment-date').innerText = appointment._id;
    document.getElementById('title').innerText = appointment.title;
    document.getElementById('description').innerText = appointment.description;

    // Format the dates to a more user-friendly format
    const dueDate = new Date(appointment.dueDate).toLocaleDateString();
    const startDate = new Date(appointment.startDate);
    const endDate = new Date(appointment.endDate);
    const startDateFormatted = startDate.toLocaleString();
    const endDateFormatted = endDate.toLocaleString();

    console.log(dueDate);
    console.log(startDate);
    console.log(endDate);

    document.getElementById('due-date').value = dueDate;
    document.getElementById('appointment-date').value = startDateFormatted;
    document.getElementById('time-span').value = getTimeSpan(startDate, endDate);

    // Set place
    document.getElementById('place').innerText = appointment.place;
}

async function attendEvent() {
    const email = document.getElementById('email').value;
    const firstname = document.getElementById('firstname').value;
    const lastname = document.getElementById('lastname').value;

    if (!email || !firstname || !lastname) {
        errorParagraph.innerText = "Fill in all fields.";
        return;
    }

    const response = await fetchRegular("/api/schedule/create",
        {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                appointment: appointment,
                email: email,
                firstname: firstname,
                lastname: lastname
            })
        });
    const js = await response.json();

    if (response.status !== 200) {
        errorParagraph.innerText = js["message"];
        successParagraph.innerText = "";
    } else {
        errorParagraph.innerText = "";
        successParagraph.innerText = "Registered successfully.";
    }


}