import * as simulation from "../data/simulation.js";
import Map from "./map/index.js";
import { updatePanel } from "./panel.js";

const mapKey = "6T8Cb9oYBFeDjDhpmNmd";
const bounds = [
    "3.660507202148437", "43.49552248630757",
    "4.092750549316406", "43.73736766145917",
];

const map = new Map("map", bounds, mapKey);
window.__map = map;

const panel = document.querySelector("#panel");

map.addEventListener("ready", () => {
    const simstate = simulation.start();
    window.__simstate = simstate.courses;

    let showCourse = null;

    const boundUpdatePanel = () => {
        updatePanel(panel, simstate.courses, showCourse);
    };

    const animateCourses = () => {
        simstate.update();
        map.update(simstate.courses);
        requestAnimationFrame(animateCourses);
    };

    map.addEventListener("click-courses", event => {
        const courses = event.detail;
        const index = courses.indexOf(showCourse);

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

        map.follow(showCourse);
        boundUpdatePanel();
    });

    setInterval(boundUpdatePanel, 1000);
    animateCourses();
});