import "ol/ol.css";

import { Map, View } from "ol";
import * as proj from "ol/proj";
import { getLayers as getTilesLayers } from "./tiles";
import { getLayers as getNetworkLayers } from "./network";
import { setupCoursesAnimation } from "./courses";

export const create = (target, coursesSimulation, onClick) => {
    const view = new View({
        center: proj.fromLonLat([3.88, 43.605]),
        zoom: 14,
        maxZoom: 22,
        constrainResolution: true
    });

    const tilesLayers = getTilesLayers();
    const networkLayers = getNetworkLayers();
    const stopsLayer = networkLayers[2];

    const map = new Map({
        target,
        layers: [...tilesLayers, ...networkLayers],
        view
    });

    setupCoursesAnimation(map, coursesSimulation, stopsLayer, onClick);
    map.render();

    return map;
};