"use strict";

import {Utils} from "../Utils/Utils.ecma.js";
import {EventModel} from "../Models/EventModel.ecma.js";
import {DotModel} from "../Models/DotModel.ecma.js";
import {ScreenModel} from "../Models/ScreenModel.ecma.js";

export const MapView = (function(){

    const MapView = function(routes_marker){

        const self = this;
        let built = false, 
            /** @type {Array.<[number, number]>} */
            dots = [];

        /** @type {ScreenModel|null} */
        this.screen = null;
        /** @type {EventModel} */
        this.on_dots_change = new EventModel();

        /** @type {HTMLElement|null} */
        this.box = null;
        /** @type {L.Map|null} */
        this.map = null;

        const constructor = () => {};

        this.build = () => {
            if(!built && routes_marker.item_self){
                built = true;
                self.box = Utils.set_html(routes_marker.item_self, [
                    ["div", {
                        id : "routes-maker-map", 
                        class : "map", 
                        data_show_markers : true, 
                        data_show_routes : true
                    }]
                ])[0];
                L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
                    maxZoom : 19,
                    attribution : '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
                }).addTo(self.map = L.map("routes-maker-map").setView(routes_marker.get_user_coordenates(), 13));
                (self.screen = new ScreenModel(self.box)).on_change.add((i, x, y, box) => {
                    self.map.invalidateSize(true);
                });
                self.map.on("click", event => {

                    const dot = new DotModel(self.map, event.latlng.lng, event.latlng.lat, dots.length, dots);

                    dots.push(dot);
                    recalculate_total_distance();
                    dot.on_change.add(() => {
                        recalculate_total_distance();
                    });

                });
            };
        };

        const recalculate_total_distance = () => {
            routes_marker.item_self.querySelector(".map-menu [name=distance]").value = dots.reduce((distance, dot) => distance + dot.distance, 0) >> 0;
        };

        constructor();

    };

    return MapView;
})();