"use strict";

import { fetchWithToken } from "./utils.js";

let last_clicked = "";
let click_counter = 0;

// Call the function to render data
window.addEventListener("load", async function () {
    await fetchAppointments();
});

// Function to format time as HH:MM
function formatTime(date) {
    const hours = date.getUTCHours().toString().padStart(2, '0');
    const minutes = date.getUTCMinutes().toString().padStart(2, '0');
    return `${hours}:${minutes}`;
}

// Function to get the time span (e.g., 09:00 to 10:00)
function getTimeSpan(start, end) {
    return `${formatTime(new Date(start))} to ${formatTime(new Date(end))}`;
}

// Render the appointments into the table
function renderAppointments(data) {
    const tableBody = document.getElementById('appointment-table-body');
    tableBody.innerHTML = '';
    data.forEach(appointment => {
        const row = document.createElement('tr');
        const titleCell = document.createElement('td');
        const descriptionCell = document.createElement('td');
        const placeCell = document.createElement('td');
        const dueDateCell = document.createElement('td');
        const timeSpanCell = document.createElement('td');
        const shareCell = document.createElement('td');
        const participantCell = document.createElement('td');
        const editCell = document.createElement('td');
        const deleteCell = document.createElement('td');
        const shareATag = document.createElement('a');
        const participantATag = document.createElement('a');
        const editATag = document.createElement('a');
        const deleteButton = document.createElement('button');
        participantATag.href = `/html/bookings.html?appointment=${appointment._id}`;
        participantATag.innerText = 'participants';
        participantATag.classList.add('participants-link');
        editATag.href = `/html/appointmentscreator.html?appointment=${appointment._id}`;
        shareATag.href = `/html/schedule.html?appointment=${appointment._id}`;
        shareATag.innerText = 'share';
        shareATag.classList.add('share-link');
        editATag.innerText = 'edit';
        editATag.classList.add('edit-link');
        deleteButton.onclick = async () => {
            if (last_clicked !== appointment._id) {
                click_counter += 1;
                last_clicked = appointment._id;
                return;
            }

            await deleteAppointment(appointment._id);
        }
        deleteButton.innerText = 'delete';

        shareCell.appendChild(shareATag);
        participantCell.appendChild(participantATag);
        editCell.appendChild(editATag);
        deleteCell.appendChild(deleteButton);

        titleCell.textContent = appointment.title;
        descriptionCell.textContent = appointment.description;
        dueDateCell.textContent = new Date(appointment.dueDate).toLocaleDateString();
        placeCell.textContent = appointment.place;

        timeSpanCell.textContent = getTimeSpan(appointment.startDate, appointment.endDate);
        timeSpanCell.classList.add('time-span');

        // Append cells to the row
        row.appendChild(titleCell);
        row.appendChild(descriptionCell);
        row.appendChild(dueDateCell);
        row.appendChild(placeCell);
        row.appendChild(timeSpanCell);
        row.appendChild(shareCell);
        row.appendChild(participantCell);
        row.appendChild(editCell);
        row.appendChild(deleteCell);

        // Append the row to the table body
        tableBody.appendChild(row);
        tableBody.appendChild(row);
    });
}

async function deleteAppointment(appointmentId) {
    const response = await fetchWithToken(`/api/users/delete`, {
        method: 'DELETE',
        body: JSON.stringify({appointmentId: appointmentId})
    });
    if (response.status === 401) {
        window.location.replace("/html/auth.html");
        return;
    }

    if (response.ok) {
        await fetchAppointments();
    }
}

async function fetchAppointments() {
    const response = await fetchWithToken("/api/users/appointments");
    if (response.status === 401) {
        window.location.replace("/html/auth.html");
        return;
    }

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


    renderAppointments(js);
}