"use strict";

const OptionsView = (function(){

    const OptionsView = function(xgravity){

        const self = this;
        let view_element = null,
            listening_key = false;

        this.close = () => {
            if(view_element && view_element.parentNode){
                view_element.parentNode.removeChild(view_element);
                view_element = null;
            }
        };

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

            let current_quality = xgravity.settings.get("canvas_quality", null, 100);
            let current_action_key = xgravity.settings.get("action_key", null, "Space");
            let current_bg_mode = xgravity.settings.get("background_mode", null, "stars");
            let current_diff = xgravity.settings.get("current_difficulty", null, "average");

            const nodes = xgravity.html(xgravity.item_self, [
                "div", { class : "xg-view xg-options" }, [
                    ["h2", { class : "xg-subtitle", "data-i18n" : "opt_title" }],
                    ["div", { class : "xg-panel" }, [
                        // Mostrar / Ocultar FPS
                        ["div", { class : "xg-field-row" }, [
                            ["span", { "data-i18n" : "opt_show_fps" }],
                            ["input", {
                                type : "checkbox",
                                class : "xg-checkbox",
                                ...(xgravity.settings.get("show_fps", null, false) ? { checked : "checked" } : {}),
                                "data-i18n-without" : "true",
                                onchange : (input) => {
                                    const enabled = input.checked;
                                    xgravity.settings.add({ show_fps : enabled });

                                    // Si se desactiva, lo cerramos inmediatamente
                                    if(!enabled && xgravity.views.fps){
                                        xgravity.views.fps.close();
                                    }
                                }
                            }]
                        ]],
                        // Selector de Dificultad
                        ["div", { class : "xg-field-row" }, [
                            ["span", { "data-i18n" : "opt_difficulty" }],
                            ["select", { 
                                class : "xg-select",
                                "data-i18n-without" : "true",
                                onchange : (select) => {
                                    xgravity.settings.add({ current_difficulty : select.value });
                                }
                            }, [
                                ["option", { value : "training", ...(current_diff === "training" ? { selected : "selected" } : {}), "data-i18n" : "diff_training" }],
                                ["option", { value : "newbie", ...(current_diff === "newbie" ? { selected : "selected" } : {}), "data-i18n" : "diff_newbie" }],
                                ["option", { value : "lazy", ...(current_diff === "lazy" ? { selected : "selected" } : {}), "data-i18n" : "diff_lazy" }],
                                ["option", { value : "average", ...(current_diff === "average" ? { selected : "selected" } : {}), "data-i18n" : "diff_average" }],
                                ["option", { value : "hard", ...(current_diff === "hard" ? { selected : "selected" } : {}), "data-i18n" : "diff_hard" }],
                                ["option", { value : "berserk", ...(current_diff === "berserk" ? { selected : "selected" } : {}), "data-i18n" : "diff_berserk" }],
                                ["option", { value : "insane", ...(current_diff === "insane" ? { selected : "selected" } : {}), "data-i18n" : "diff_insane" }]
                            ]]
                        ]],
                        // Calidad de Canvas
                        ["div", { class : "xg-field-row" }, [
                            ["label", { 
                                id : "xg_lbl_quality", 
                                "data-i18n" : "opt_canvas_quality" 
                            }, xgravity.i18n.get("opt_canvas_quality", { quality : current_quality })],
                            ["input", { 
                                type : "range", 
                                class : "xg-range",
                                min : "3.125", 
                                max : "100", 
                                step : "3.125", 
                                value : current_quality,
                                "data-i18n-without" : "true",
                                oninput : (input) => {
                                    const value = parseFloat(input.value);
                                    xgravity.settings.add({ canvas_quality : value });
                                    const lbl = document.getElementById("xg_lbl_quality");
                                    if(lbl)
                                        lbl.textContent = xgravity.i18n.get("opt_canvas_quality", { quality : value });
                                }
                            }]
                        ]],
                        // Modo de Fondo
                        ["div", { class : "xg-field-row" }, [
                            ["span", { "data-i18n" : "opt_background" }],
                            ["select", { 
                                class : "xg-select",
                                "data-i18n-without" : "true",
                                onchange : (select) => {
                                    xgravity.settings.add({ background_mode : select.value });
                                }
                            }, [
                                ["option", { value : "image", ...(current_bg_mode === "image" ? { selected : "selected" } : {}), "data-i18n" : "opt_bg_image" }],
                                ["option", { value : "stars", ...(current_bg_mode === "stars" ? { selected : "selected" } : {}), "data-i18n" : "opt_bg_stars" }],
                                ["option", { value : "procedural", ...(current_bg_mode === "procedural" ? { selected : "selected" } : {}), "data-i18n" : "opt_bg_procedural" }]
                            ]]
                        ]],
                        // Tecla de Acción
                        ["div", { class : "xg-field-row" }, [
                            ["span", { "data-i18n" : "opt_action_key" }],
                            ["button", { 
                                id : "xg_btn_key", 
                                class : "xg-btn",
                                "data-i18n-without" : "true",
                                onclick : (btn) => {
                                    if(listening_key) return;
                                    listening_key = true;
                                    btn.textContent = xgravity.i18n.get("btn_press_key");
                                    
                                    const on_keydown = (e) => {
                                        window.removeEventListener("keydown", on_keydown);
                                        const chosen = e.code === "Space" ? "Space" : (e.key.length === 1 ? e.key.toUpperCase() : e.code);
                                        xgravity.settings.add({ action_key : chosen });
                                        btn.textContent = chosen;
                                        listening_key = false;
                                    };
                                    window.addEventListener("keydown", on_keydown);
                                }
                            }, current_action_key]
                        ]],
                        // Botón Volver con auto-limpieza
                        ["button", { 
                            class : "xg-btn", 
                            "data-i18n" : "btn_back",
                            onclick : () => {
                                self.close();
                                if(xgravity.views.main_menu)
                                    xgravity.views.main_menu.go();
                            }
                        }]
                    ]]
                ]
            ]);

            view_element = nodes[0];
            xgravity.i18n.update();
        };

    };

    return OptionsView;
})();