"use strict";

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

export const MenuView = (function(){

    const MenuView = function(routes_marker){

        const self = this;
        let built = false;

        const constructor = () => {};

        this.build = () => {
            if(!built && routes_marker.item_self){
                built = true;
                Utils.set_html(routes_marker.item_self, [
                    ["form", {
                        class : "map-menu", 
                        method : "GET", 
                        action : "#", 
                        on_submit : (form, event) => false
                    }, [
                        ["fieldset", null, [
                            ["legend", {data_i18n : "menu"}, "Menu"], 
                            ["nav", null, [
                                ["ul", null, [
                                    ["li", {
                                        data_i : 0, 
                                        data_field : "distance", 
                                        data_i18n : "distance", 
                                        data_i18n_without : true, 
                                        title : "Distance"
                                    }, [
                                        ["label", {for : "distance"}, [
                                            ["span", {data_i18n : "distance"}, "Distance"], 
                                            ["input", {
                                                type : "text", 
                                                name : "distance", 
                                                readonly : true, 
                                                id : "distance"
                                            }], 
                                            ["span", {data_i18n : "meters_symbol"}, "m"]
                                        ]]
                                    ]], 
                                    ["li", {
                                        data_i : 1, 
                                        data_field : "show-markers", 
                                        data_i18n : "show_markers", 
                                        data_i18n_without : true, 
                                        title : "Show markers"
                                    }, [
                                        ["label", {for : "show-markers"}, [
                                            ["input", {
                                                type : "checkbox", 
                                                name : "show_markers", 
                                                id : "show-markers", 
                                                checked : true, 
                                                on_change : (item, event) => {
                                                    Utils.set_attributes(".map", {data_show_markers : item.checked}, routes_marker.item_self);
                                                }
                                            }], 
                                            ["span", {data_i18n : "show_markers"}, "Show markers"]
                                        ]]
                                    ]], 
                                    ["li", {
                                        data_i : 2, 
                                        data_field : "show-routes", 
                                        data_i18n : "show_routes", 
                                        data_i18n_without : true, 
                                        title : "Show routes"
                                    }, [
                                        ["label", {for : "show-routes"}, [
                                            ["input", {
                                                type : "checkbox", 
                                                name : "show_routes", 
                                                id : "show-routes", 
                                                checked : true, 
                                                on_change : (item, event) => {
                                                    Utils.set_attributes(".map", {data_show_routes : item.checked}, routes_marker.item_self);
                                                }
                                            }], 
                                            ["span", {data_i18n : "show_routes"}, "Show routes"]
                                        ]]
                                    ]]
                                ]]
                            ]]
                        ]]
                    ]]
                ]);
            };
        };

        constructor();

    };

    return MenuView;
})();