"use strict";

const appointmentErrorParagraph = document.getElementById("appointment-error");
const appointmentSuccessParagraph = document.getElementById("appointment-success");
const titleInput = document.getElementById('title');
const descriptionInput = document.getElementById('description');
const dueDateInput = document.getElementById('dueDate');
const startDateInput = document.getElementById('startDate');
const endDateInput = document.getElementById('endDate');
const placeInput = document.getElementById('place');


window.addEventListener("load", async function() {
    const urlParams = new URLSearchParams(window.location.search);
    const appointment = urlParams.get('appointment');

    if (appointment) {
        // load appointment data
        await loadAppointment(appointment);
        document.getElementById("appointment-btn").innerText = "Edit Appointment";
        document.getElementById("form-title").innerText = "Edit Appointment";
    }

    document.getElementById("appointment-btn").addEventListener('click', async () => {
        if (!appointment) {
            await createAppointment();
        } else {
            // modify appointment
            // TODO Add a modify appointment function
        }
    })
});

async function fetchWithToken(url, options) {
    const authToken = localStorage.getItem('token');
    return await fetch(url, {...options, headers: {
            'Authorization': `Bearer ${authToken}`,
            'Content-Type': 'application/json',
        }});
}

async function displayAppointment(data) {
    titleInput.value = data.title;
    descriptionInput.value = data.description;
    dueDateInput.value = new Date(data.dueDate).toISOString().split('T')[0];
    startDateInput.value = new Date(data.startDate).toISOString().slice(0, 16);
    endDateInput.value = new Date(data.endDate).toISOString().slice(0, 16);
    placeInput.value = data.place;
}

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

    const response = await fetch(`/api/schedule?appointmentId=${appointment}`, options)
        .catch(err => console.error('error:' + err));

    if (response.status === 404) {
        window.location.replace("/html/404.html");
    }
    const js = await response.json();
    await displayAppointment(js);
}

async function createAppointment() {
    const title = titleInput.value;
    const description = descriptionInput.value;
    const dueDate = dueDateInput.value;
    const startDate = startDateInput.value;
    const endDate = endDateInput.value;
    const place = placeInput.value;

    if (!title || !description || !dueDate || !startDate || !endDate) {
        appointmentSuccessParagraph.innerText = "";
        appointmentErrorParagraph.innerText = "Not fields filled";
        return;
    }

    const response = await fetchWithToken('/api/users/create', {
        method: 'POST',
        body: JSON.stringify({
            title: title,
            description: description,
            dueDate: dueDate,
            startDate: startDate,
            endDate: endDate,
            place: place
        })
    });
    const js = await response.json();

    if (!response.ok) {
        appointmentSuccessParagraph.innerText = "";
        appointmentErrorParagraph.innerText = js["message"];
    } else {
        const path = `/html/schedule.html?appointment=${js["id"]}`;
        appointmentErrorParagraph.innerText = "";
        appointmentSuccessParagraph.innerText = "Appointment created successfully. The share link " +
            "was copied to your clipboard";
        await navigator.clipboard.writeText(`${window.location.origin}${path}`);
    }
}