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

window.addEventListener("load", async function () {
    const urlParams = new URLSearchParams(window.location.search);
    const appointment = urlParams.get('appointment');
    if (!appointment) {
        window.location.replace("/html/404.html");
    }
    await getAppointment(appointment);
    await fetchBookings(appointment);
});

function displayAppointmentDetails(appointmentData) {
    // Retrieve the container
    const appointmentInfo = document.querySelector('.appointment-info');

    // Clear existing content
    while (appointmentInfo.firstChild) {
        appointmentInfo.removeChild(appointmentInfo.firstChild);
    }

    // Create and append the updated appointment content
    const title = document.createElement('p');
    const titleLabel = document.createElement('strong');
    titleLabel.textContent = 'Title: ';
    title.appendChild(titleLabel);
    title.appendChild(document.createTextNode(appointmentData.title));

    const description = document.createElement('p');
    const descriptionLabel = document.createElement('strong');
    descriptionLabel.textContent = 'Description: ';
    description.appendChild(descriptionLabel);
    description.appendChild(document.createTextNode(appointmentData.description));

    const place = document.createElement('p');
    const placeLabel = document.createElement('strong');
    placeLabel.textContent = 'Place: ';
    place.appendChild(placeLabel);
    place.appendChild(document.createTextNode(appointmentData.place));

    const dueDate = document.createElement('p');
    const dueDateLabel = document.createElement('strong');
    dueDateLabel.textContent = 'Due Date: ';
    dueDate.appendChild(dueDateLabel);
    dueDate.appendChild(document.createTextNode(new Date(appointmentData.dueDate).toLocaleDateString()));

    const timeSpan = document.createElement('p');
    const timeSpanLabel = document.createElement('strong');
    timeSpanLabel.textContent = 'Time Span: ';
    timeSpan.appendChild(timeSpanLabel);
    timeSpan.appendChild(document.createTextNode(getTimeSpan(appointmentData.startDate, appointmentData.endDate)));

    // Append all the updated elements
    appointmentInfo.appendChild(title);
    appointmentInfo.appendChild(description);
    appointmentInfo.appendChild(place);
    appointmentInfo.appendChild(dueDate);
    appointmentInfo.appendChild(timeSpan);
}

// Helper function to format the time span
function getTimeSpan(startDate, endDate) {
    const start = new Date(startDate).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    const end = new Date(endDate).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    return `${start} to ${end}`;
}

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

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

    if (response.status === 404) {
        window.location.replace("/html/404.html");
    }

    const js = await response.json();
    displayAppointmentDetails(js);
}


function renderBookings(data) {
    const tableBody = document.getElementById('participants-table-body');
    tableBody.innerHTML = ''; // Clear existing rows

    data.forEach(participant => {
        // Create a new table row
        const row = document.createElement('tr');

        // Create table cells for first name, last name, and email
        const firstNameCell = document.createElement('td');
        const lastNameCell = document.createElement('td');
        const emailCell = document.createElement('td');

        // Populate cell content with participant data
        firstNameCell.textContent = participant.firstname;
        lastNameCell.textContent = participant.lastname;
        emailCell.textContent = participant.email;

        // Append cells to the row
        row.appendChild(firstNameCell);
        row.appendChild(lastNameCell);
        row.appendChild(emailCell);

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


async function fetchBookings(appointmentId) {
    const response = await fetchWithToken(`/api/users/bookings?appointmentId=${appointmentId}`);
    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");
    }
    renderBookings(js);
}