"use strict";

import {BaseComponent} from "../Components/BaseComponent.ecma.js";
import {FormsComponent} from "../Components/FormsComponent.ecma.js";
import {DatesComponent} from "../Components/DatesComponent.ecma.js";
import {SelectsComponent} from "../Components/SelectsComponent.ecma.js";
import {TablesComponent} from "../Components/TablesComponent.ecma.js";
import {SessionMiniComponent} from "../Components/SessionMiniComponent.ecma.js";
import {LicensesComponent} from "../Components/LicensesComponent.ecma.js";
import {I18NComponent} from "../Components/I18NComponent.ecma.js";
import { AIChatComponent } from "../Components/AIChatComponent.ecma.js";
import {Common} from "../Utils/Common.ecma.js";
import {Check} from "../Utils/Checks.ecma.js";
import {
    Span, Img, Button, Label, Input, Textarea, Div
} from "../Utils/HTMLDSL.ecma.js";

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

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

    /**
     * @callback event_callback
     * @param {!HTMLElement} element 
     * @param {!Event} event
     * @return {any|null|void}
     */

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

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

        /** @type {BaseComponent} */
        this.base = new BaseComponent(anp);
        /** @type {FormsComponent} */
        this.forms = new FormsComponent(anp);
        /** @type {DatesComponent} */
        this.dates = new DatesComponent(anp);
        /** @type {SelectsComponent} */
        this.selects = new SelectsComponent(anp);
        /** @type {TablesComponent} */
        this.tables = new TablesComponent(anp);
        /** @type {SessionMiniComponent} */
        this.session_mini = new SessionMiniComponent(anp);
        /** @type {LicensesComponent} */
        this.licenses = new LicensesComponent(anp);
        /** @type {I18NComponent} */
        this.i18n_selector = new I18NComponent(anp);
        /** @type {AIChatComponent} */
        this.aichat = new AIChatComponent(anp);

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

        /**
         * @param {!(string|Array.<string>)} keys 
         * @param {!(Object.<string, any|null>|Array.<any|null>)} inputs 
         * @returns {Object.<string, any>}
         * @access public
         */
        this.set_attributes = (keys, inputs) => Common.get_array(keys).reduce((attributes, key) => {

            /** @type {any|null} */
            const value = Common.get_value(key, inputs, null);

            value !== null && (attributes[Common.get_array(key)[0]] = value);

            return attributes;
        }, {});

        /**
         * 
         * @param {?(Object.<string, any|null>|Array.<any|null>)} [inputs = null] 
         * @returns {Array.<any|None>}
         */
        this.image = (inputs = null) => {

            /** @type {string|null} */
            const i18n = Common.get_value("i18n", inputs, null), 
                  /** @type {string|null} */
                  alternative = Common.get_value(["alt", "alternative"], inputs, null),
                  /** @type {string|null} */
                  text = i18n ? anp.i18n.get([alternative, i18n], inputs) : alternative;
            /** @type {Array.<string>|string} */
            let sources = Common.get_value(["src", "source", "sources"], inputs, null);

            return Span({
                class : "image", 
                data_i : 0, 
                data_data : Common.base64_encode(Check.is_array(sources) ? sources : sources = [sources])
            }, [
                Img({
                    src : sources[0], 
                    on_load : (item, event) => {
                        item.parentNode.querySelector("span").style.backgroundImage = `url(${item.getAttribute("src")})`;
                    }, 
                    on_error : (item, event) => {

                        const i = Number(item.parentNode.getAttribute("data_i")) + 1;

                        item.setAttribute("src", Common.json_decode(Common.base64_decode(item.parentNode.getAttribute("data-data")))[i]);
                        item.parentNode.setAttribute("data_i", i);
                        
                    }, 
                    ...(i18n ? {data_i18n : i18n, data_i18n_without : true, alt : text} : text ? {alt : text} : {})
                }), 
                Span()
            ]);
        };

        this.i18n = (i18n, tag = "span", variables = null) => [tag, {
            data_i18n : i18n, 
            ...(variables ? {data_i18n_variables : Common.data_encode(variables)} : {})
        }, anp.i18n.get(i18n, variables)];

        this.icon = (icon, tag = "span") => [tag, {data_icon : icon}];

        this.button = (name, action, inputs = null) => {

            const text = anp.i18n.get(name, (
                      Check.is_bool(inputs) ? {toogled : inputs} : 
                      Check.is_string(inputs) ? {type : inputs} : 
                  inputs)), 
                  has_action = Check.is_function(action), 
                  type = Check.is_string(action) ? action : Common.get_value("type", inputs, "button"), 
                  toggled = Common.get_value("toggled", inputs, null);

            has_action || (action = null);

            return Button({
                type : type,
                data_i18n : name, 
                data_i18n_without : true,
                title : text,
                ...(
                    toggled !== null ? {
                        data_toggled : toggled, 
                        on_click : (button, event) => {
                            button.setAttribute("data_toggled", button.getAttribute("data_toggled") != "true");
                            Common.execute(action, (button, event));
                        }
                    } : 
                    has_action ? {on_click : action} : 
                {}),
            }, [
                self.icon(name), 
                self.i18n(name)
            ]);
        };

        this.checkbox = (name, inputs = null) => Label({
            class : "checkbox", 
            data_i18n : name, 
            data_i18n_without : true,
            title : anp.i18n.get(name), 
        }, [
            Input({
                type : "checkbox", 
                name : name,
                checked : Common.get_value("checked", inputs, false), 
                ...self.set_attributes([
                    ["on_change", "onchange"], 
                    ["id", "identifier"]
                ], inputs)
            }), 
            self.icon("checkbox"), 
            self.i18n(name)
        ]);

        this.radio = (name, inputs = null) => {

            const set = Common.get_value("set", inputs);

            return Label({
                class : "radio radio-button", 
                data_i18n : name, 
                data_i18n_without : true,
                title : anp.i18n.get(name), 
            }, [
                Input({
                    type : "radio",
                    name : set ? set + "[]" : name,
                    value : name, 
                    checked : Common.get_value("checked", inputs, false), 
                    ...self.set_attributes([
                        ["on_change", "onchange"], 
                        ["id", "identifier"]
                    ], inputs)
                }), 
                self.icon("radio"), 
                self.i18n(name)
            ]);
        };

        this.text = (name, inputs = null) => {

            const text = anp.i18n.get(name), 
                  minimum_length = Common.get_value("minimum_length", inputs, null), 
                  maximum_length = Common.get_value("maximum_length", inputs, null);

            return Span({
                class : "input input-text", 
                data_i18n : name, 
                data_i18n_without : true,
                title : text
            }, [
                Common.get_value("multiline", inputs, false) ? Textarea({
                    name : name, 
                    data_i18n : name, 
                    data_i18n_without : true, 
                    placeholder : text + "...", 
                    ...self.set_attributes([
                        ["id", "identifier"], 
                        ["maxlength", "maximum_length"], 
                        "pattern", 
                        "value"
                    ], inputs)
                }) : Input({
                    type : "text", 
                    name : name, 
                    data_i18n : name, 
                    data_i18n_without : true, 
                    placeholder : text + "...", 
                    ...self.set_attributes([
                        ["id", "identifier"], 
                        ["maxlength", "maximum_length"], 
                        "pattern", 
                        "value"
                    ], inputs)
                }), 
                Span({class : "minimum", data_minimum : minimum_length}, "" + minimum_length), 
                Span({class : "length"}, "" + Common.get_value("value", inputs, "").length), 
                Span({class : "maximum", data_maximum : maximum_length}, "" + maximum_length)
            ]);
        };

        this.password = (name, inputs = null) => {

            const text = anp.i18n.get(name), 
                  minimum_length = Common.get_value("minimum_length", inputs, 0), 
                  maximum_length = Common.get_value("maximum_length", inputs, 0);

            return Span({
                data_i18n : name, 
                data_i18n_without : true,
                title : text
            }, [
                Input({
                    type : "password", 
                    name : name, 
                    data_i18n : name, 
                    data_i18n_without : true, 
                    placeholder : text + "...", 
                    ...self.set_attributes([
                        ["id", "identifier"], 
                        ["maxlength", "maximum_length"], 
                        "pattern", 
                        "value"
                    ], inputs)
                }), 
                Span({class : "minimum", data_minimum : minimum_length}, "" + minimum_length), 
                Span({class : "length"}, "" + Common.get_value("value", inputs, "").length), 
                Span({class : "maximum", data_maximum : maximum_length}, "" + maximum_length)
            ]);
        };

        this.email = (name, inputs = null) => {

            const text = anp.i18n.get(name);

            return Span({
                data_i18n : name, 
                data_i18n_without : true,
                title : text
            }, [
                Input({
                    type : "email", 
                    name : name, 
                    data_i18n : name, 
                    data_i18n_without : true, 
                    placeholder : text + "...", 
                    pattern : "[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,}$"
                })
            ]);
        };

        this.number = (name, inputs = null) => {

            const text = anp.i18n.get(name), 
                  minimum = Common.get_value("minimum", inputs, 0),
                  maximum = Common.get_value("maximum", inputs, 0), 
                  value = Common.get_value("value", inputs, 0);

            return Span({
                data_i18n : name, 
                data_i18n_without : true,
                title : text
            }, [
                Input({
                    type : "number", 
                    name : name, 
                    data_i18n : name, 
                    data_i18n_without : true, 
                    placeholder : text + "...", 
                    ...self.set_attributes([
                        ["id", "identifier"], 
                        ["min", "minimum"], 
                        ["max", "maximum"], 
                        "step", 
                        "value"
                    ], inputs)
                }), 
                Span({class : "minimum", data_minimum : minimum}, "" + minimum), 
                Span({class : "value"}, "" + value), 
                Span({class : "maximum", data_maximum : maximum}, "" + maximum)
            ]);
        };

        /**
         * @param {!Array.<Array.<[string, string|event_callback, Object.<string, any|null>|Array.<any|null>]>>} buttons 
         * @param {?(Object.<string, any|null>|Array.<any|null>)} [inputs = null] 
         * @returns {Array.<any|null>}
         */
        this.buttons = (buttons, inputs = null) => Div({
            class : ["buttons"].concat(Common.get_array(Common.get_value("class", inputs, []))).join(" ").trim(), 
            ...Common.get_dictionary(inputs, false, ["class"])
        }, buttons.map(([name, action, inputs]) => (
            self.button(name, action, inputs)
        )));

        constructor();
        
    };

    return Components;
})();