"use strict";

import {Utils} from "../Utils/Utils.ecma.js";
import {EventModel} from "../Models/EventModel.ecma.js";
import {LeafLetOSMDriver} from "../Drivers/LeafLetOSMDriver.ecma.js";

/**
 * @typedef {import("../Application/RoutesMaker.ecma.js").RoutesMaker} RoutesMaker
 * @typedef {import("../Interfaces/MapDriverInterface.ecma.js").MapDriverInterface} MapDriverInterface
 */

/**
 * @class
 * @constructor
 * @param {!RoutesMaker} routes_maker
 * @returns {void}
 * @access public
 * @static
 */
export const MapView = (function(){

    /**
     * @constructs MapView
     * @param {!RoutesMaker} routes_maker
     * @returns {void}
     * @access private
     * @static
     */
    const MapView = function(routes_maker){

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

        this.create_points = true;

        /** @type {EventModel} */
        this.on_dots_change = new EventModel();
        /** @type {EventModel} */
        this.on_click = new EventModel();

        /** @type {MapDriverInterface} */
        this.driver = null;

        const constructor = () => {};

        this.set_point = (longitude, latitude) => {
            if(self.create_points){

                const [key, type] = routes_maker.menu.get_selected();

                if(key){
                    routes_maker[type].get(key).add_dot(longitude, latitude).on_change.add((..._) => {
                        recalculate_total_distance();
                    });
                    recalculate_total_distance();
                };

            };
            self.on_click.execute(longitude, latitude);
        };

        this.build = () => {
            if(!built && routes_maker.base.item){
                built = true;
                (self.driver = new LeafLetOSMDriver(routes_maker)).build(self.box = Utils.set_html(routes_maker.base.item, [
                    ["div", {
                        id : "routes-maker-map", 
                        class : "map", 
                        data_show_markers : true, 
                        data_show_routes : true
                    }]
                ])[0]);
                self.driver.on_click.add((_, longitude, latitude) => {
                    self.set_point(longitude, latitude);
                });

                // 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_maker.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 = () => {

            const [key, type] = routes_maker.menu.get_selected()[0];

            key && 
            (routes_maker.base.item.querySelector(".map-menu [name=distance]").value = routes_maker[type].get(key).get_distance() >> 0);

        };

        constructor();

    };

    return MapView;
})();