"use strict";

const OptionsView = (function(){

    const OptionsView = function(hollow_bond){

        const self = this;
        let root_element = null;

        this.destroy = () => {
            if(root_element && root_element.parentNode){
                root_element.remove();
                root_element = null;
            };
        };

        this.go = () => {
            self.destroy();

            const current_scale = hollow_bond.render_scale, 
                  current_fps = hollow_bond.show_fps;

            root_element = hollow_bond.html(hollow_bond.item_self, ["div", {"class" : "options-modal"}, [
                ["div", {"class" : "options-box"}, [
                    ["h2", {"data-i18n" : "options_title"}, hollow_bond.i18n.get("options_title", null, "Opciones")], 

                    // Selector de calidad / Render Scale
                    ["div", {"class" : "field-group"}, [
                        ["label", {}, [
                            ["span", {"data-i18n" : "render_scale_label"}, hollow_bond.i18n.get("render_scale_label", null, "Calidad del Canvas: ")], 
                            ["span", {"class" : "scale-value"}, String(current_scale)], 
                            ["span", {}, "%"]
                        ]], 
                        ["input", {
                            "type" : "range", 
                            "min" : "3.125", 
                            "max" : "100", 
                            "step" : "3.125", 
                            "value" : String(current_scale), 
                            "class" : "range-input", 
                            "oninput" : input => {
                                input.closest(".field-group").querySelector(".scale-value").textContent = parseFloat(input.value).toFixed(3).replace(/\.?0+$/, "");
                            }
                        }]
                    ]], 

                    // Checkbox para ver FPS
                    ["div", {"class" : "field-group-checkbox"}, [
                        ["label", {}, [
                            ["input", {
                                "type" : "checkbox", 
                                "class" : "checkbox-input", 
                                ...(current_fps ? {"checked" : "checked"} : {})
                            }], 
                            ["span", {"data-i18n" : "show_fps_label"}, hollow_bond.i18n.get("show_fps_label", null, "Mostrar indicador de FPS")]
                        ]]
                    ]], 

                    // Botonera de acciones
                    ["div", {"class" : "modal-actions"}, [
                        ["button", {
                            "class" : "menu-button", 
                            "data-i18n" : "btn_save", 
                            "onclick" : button => {

                                const box = button.closest(".options-box"), 
                                      new_scale = parseFloat(box.querySelector(".range-input").value) || 100, 
                                      new_fps = box.querySelector(".checkbox-input").checked || false;

                                // Guardamos en memoria y en settings
                                hollow_bond.render_scale = new_scale;
                                hollow_bond.show_fps = new_fps;

                                // Si DungeonManager ya está corriendo, refrescar resolución del canvas
                                hollow_bond.dungeon && 
                                hollow_bond.dungeon.update_canvas_resolution && 
                                hollow_bond.dungeon.update_canvas_resolution();

                                self.destroy();
                                hollow_bond.views.menu.go();

                            }
                        }, hollow_bond.i18n.get("btn_save", null, "Guardar")], 

                        ["button", {
                            "class" : "menu-button", 
                            "data-i18n" : "btn_back", 
                            "onclick" : () => {
                                self.destroy();
                                hollow_bond.views.menu.go();
                            }
                        }, hollow_bond.i18n.get("btn_back", null, "Atrás")]
                    ]]
                ]]
            ]])[0];

            return self;
        };

    };

    return OptionsView;
})();