import network from "../data/network.json";
import * as simulation from "../data/simulation.js";
import Map from "./map/index.js";

// Run courses simulation
const simstate = simulation.start();

// Create display panel
const panel = document.querySelector("#panel");

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`;
    }
};

const updatePanel = () => {
    const vehicleCount = Object.values(simstate.courses).length;
    const movingVehicles = Object.values(simstate.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 (map.selectedCourse !== null && map.selectedCourse in simstate.courses) {
        const course = simstate.courses[map.selectedCourse].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>${map.selectedCourse}</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>
        `;
    }

    panel.innerHTML = html;
};

setInterval(updatePanel, 1000);

const map = new Map("map", simstate, {
    onVehicleClick(courses) {
        courses = [...courses];
        courses.sort();

        const index = courses.indexOf(map.selectedCourse);

        if (courses.length === 0) {
            map.select(null);
        } else if (index === -1) {
            map.select(courses[0]);
        } else {
            map.select(courses[(index + 1) % courses.length]);
        }

        updatePanel();
    }
});

// Reference as globals to facilitate debugging
window.__map = map;
window.__simstate = simstate.courses;
window.__network = network;