"use strict";

import {Common} from "../Utils/Common.ecma.js";
import {Nav, Span, Img, UL, LI} from "../Utils/HTMLDSL.ecma.js";

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

/**
 * @constructs I18NComponent
 * @param {!AnP} anp 
 * @return {void}
 * @access public
 * @static
 */
export const I18NComponent = (function(){

    /**
     * @constructs I18NComponent
     * @param {!AnP} anp 
     * @return {void}
     * @access private
     * @static
     */
    const I18NComponent = function(anp){

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

        /**
         * @returns {void}
         * @access private
         */
        const constructor = () => {};

        /**
         * @returns {Array.<any|null>}
         * @access public
         */
        this.build = () => Nav({class : "i18n-selector"}, [
            UL(null, anp.settings.get("i18n_selector").map(([name, text, flag]) => LI({
                data_language : name, 
                data_selected : anp.i18n.is_language_selected(name), 
                on_click : change, 
                data_role : "link", 
                title : text
            }, [
                Img({src : flag, alt : text}), 
                Span(null, text)
            ])))
        ]);

        /**
         * @param {!HTMLElement} item 
         * @param {!Event} event 
         * @return {void}
         * @access private
         */
        const change = (item, event) => {
            if(anp.i18n.change(item.getAttribute("data-language"))){
                item.parentNode.childNodes.forEach(option => {
                    option.setAttribute("data-selected", option === item ? "true" : "false");
                });
                anp.components.base.get_from(item).querySelectorAll("[data-i18n]").forEach(element => {

                    /** @type {string} */
                    const text = anp.i18n.get(element.getAttribute("data-i18n"), Common.data_decode(element.getAttribute("data-i18n-variables")));

                    element.getAttribute("data-i18n-without") != "true" && (element.innerText = text);
                    element.hasAttribute("title") && (element.setAttribute("title", text));
                    element.hasAttribute("placeholder") && (element.setAttribute("placeholder", text + "..."));
                    element.hasAttribute("alt") && (element.setAttribute("alt", text));

                });
            };
        };

        constructor();
    };

    return I18NComponent;
})();