import network from "../data/network.json";

const timeFormat = new Intl.DateTimeFormat("fr-FR", {
    timeZone: "Europe/Paris",
    timeStyle: "medium",
});

const timeToHTML = time => {
    const delta = Math.ceil((time - Date.now()) / 1000);

    if (delta <= 0) {
        return `Imminent`;
    } else if (delta < 60) {
        return `${delta} s`;
    } else {
        return `${Math.floor(delta / 60)} min ${delta % 60} s`;
    }
};

/**
 * Update the contents of the side panel with course information.
 * @param {HTMLElement} target The panel element.
 * @param {Object} courses Active courses.
 * @param {string?} showCourse The ID of a course to show.
 */
export const updatePanel = (target, courses, showCourse) => {
    const vehicleCount = Object.values(courses).length;
    const movingVehicles = Object.values(courses).filter(
        course => course.properties.speed > 0
    ).length;

    let html = `
        <dl>
            <dt>Heure locale</dt>
            <dd>${timeFormat.format(Date.now())}</dd>
        </dl>
        <dl>
            <dt>Véhicules sur la carte</dt>
            <dd>
                ${movingVehicles} en mouvement,
                ${vehicleCount - movingVehicles} à l’arrêt
            </dd>
        </dl>
    `;

    if (showCourse !== null && showCourse in courses) {
        const course = courses[showCourse].properties;

        const stopToHTML = stopId => stopId in network.stops ?
            network.stops[stopId].properties.name :
            '<em>Arrêt inconnu</em>';

        const passingsToHTML = passings => passings.map(([stopId, time]) => `
            <tr>
                <td>${stopToHTML(stopId)}</td>
                <td>${timeFormat.format(time)}</td>
            </tr>
        `).join("\n");

        const state = (
            course.traveledDistance === 0 && course.speed === 0
                ? "stopped" : "moving"
        );

        let prevPassings = course.prevPassings;

        if (state === "moving") {
            prevPassings = prevPassings.concat([[
                course.departureStop,
                course.departureTime
            ]]);
        }

        html += `
            <h2>Véhicule</h2>
            <dl>
                <dt>ID</dt>
                <dd>${showCourse}</dd>

                <dt>Ligne</dt>
                <dd>${course.line}</dd>

                <dt>Destination</dt>
                <dd>${stopToHTML(course.finalStop)}</dd>

                <dt>État</dt>
                <dd>${state === "moving"
                    ? `Entre ${stopToHTML(course.departureStop)}
                        et ${stopToHTML(course.arrivalStop)}`
                    : `À l’arrêt ${stopToHTML(course.departureStop)}`}</dd>

                ${state === "moving" ? `
                    <dt>Arrivée dans</dt>
                    <dd>${timeToHTML(course.arrivalTime - 10000)}</dd>

                    <dt>Distance parcourue</dt>
                    <dd>${Math.ceil(course.traveledDistance)} m</dd>

                    <dt>Vitesse</dt>
                    <dd>${Math.ceil(course.speed * 3600)} km/h</dd>
                ` : `
                    <dt>Départ dans</dt>
                    <dd>${timeToHTML(course.departureTime)}</dd>
                `}
            </dl>

            <h2>Arrêts précédents</h2>
            <table>${passingsToHTML(prevPassings)}</table>

            <h2>Arrêts suivants</h2>
            <table>${passingsToHTML(course.nextPassings)}</table>
        `;
    }

    target.innerHTML = html;
};