"use strict";

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

import {LayerItemModel} from "./LayerItemModel.ecma.js";
import {CoordenatesModel} from "./CoordenatesModel.ecma.js";
import {Utils} from "../Utils/Utils.ecma.js";

/**
 * @callback layer_model_add_callback
 * @param {!LayerModel}
 */

/**
 * @class
 * @constructor
 * @param {!RoutesMaker} routes_maker 
 * @param {!string} name 
 * @param {!string} key 
 * @param {?string} [data = null] 
 * @param {?layer_model_add_callback} [callback = null] 
 * @returns {void}
 * @access public
 * @static
 */
export const LayerModel = (function(){

    /**
     * @constructs LayerModel
     * @param {!RoutesMaker} routes_maker 
     * @param {!string} name 
     * @param {!string} key 
     * @param {?string} [data = null] 
     * @param {?layer_model_add_callback} [callback = null] 
     * @returns {void}
     * @access public
     * @static
     */
    const LayerModel = function(routes_maker, name, key, data = null, callback = null){

        /** @type {LayerModel} */
        const self = this;

        /** @type {RoutesMaker} */
        this.routes_maker = routes_maker;
        /** @type {string} */
        this.name = name;
        /** @type {string} */
        this.key = key;
        /** @type {Object.<string, LayerItemModel>} */
        this.items = {};

        /**
         * @returns {void}
         * @access private
         */
        const constructor = () => {
            data && self.add(data, callback);
        };

        /**
         * @param {!string} name 
         * @param {!string} data 
         * @param {!layer_model_add_callback} callback 
         * @returns {void}
         * @access public
         */
        this.add = (data, callback) => {
            routes_maker.input_text("What name will overlay have?", name => {

                const key = Utils.to_key(name);

                if(self.items[key])
                    routes_maker.alert("The name '" + name + "' has the key '" + key + "', and this key already exists.");
                else{
 
                    const points = [];
                    let event = routes_maker.map.on_click.add((_, longitude, latitude) => {
                        points.push(new CoordenatesModel(longitude, latitude));
                        console.log(points);
                        if(points.length == 2){
                            routes_maker.map.on_click.remove(event);
                            routes_maker.map.create_points = true;
                            self.items[key] = new LayerItemModel(self, name, key, LayerModel.clean_svg(data.content), ...points);

                            // console.log(LayerModel.clean_svg(data.content));

                            // const uri_data = "data:image/svg+xml;utf-8," + encodeURIComponent(LayerModel.clean_svg(data.content));

                        };
                    });
                
                    routes_maker.map.create_points = false;

                };
            });

            // console.log(data);
            // LayerModel.clean_svg(data.content);
        };

        this.get_distance = () => {
            return 0;
        };

        constructor();

    };

    LayerModel.clean_svg = svg => {
        return [
            // [/<\!\-{2}(?:(?:(?!(\-{2}>)).)+)(?:\-{2}>|$)/g, ""], 
            // [/\s+xmlns\:(?:inkscape|sodipodi)="[^"]+"/gi, ""], 
            // [/(\s)inkscape\:label(="[^"]+")/gi, "$1data-name$2"], 
            // [/\s+(?:inkscape|sodipodi)\:[^=]+="[^"]+"/gi, ""], 
            // [/<\/?sodipodi(\:[^\s>]+)(?:(?!>)(?:.|[\r\n]+))+>/gi, ""], 
            // [/>(?:\s+|[\r\n]+)+</g, "><"], 
            // [/[\r\n]+\s+/g, " "]
        ].reduce((svg, [pattern, response]) => {
            return svg.replace(pattern, response);
        }, svg.trim());
    };

    return LayerModel;
})();