"use strict";

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

/**
 * @class BaseView
 * @constructor
 * @param {!OpoTests} ot
 * @returns {void}
 * @access public
 * @static
 */
export const BaseView = (function(){

    /**
     * @constructs BaseView
     * @param {!OpoTests} ot
     * @returns {void}
     * @access private
     * @static
     */
    const BaseView = function(ot){

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

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

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

            /** @type {string} */
            const id = ot.settings.get(["id", "identifier"], inputs) || ot.identifiers.get(), 
                  /** @type {string} */
                  name = ot.settings.get(["application_name", "name"], null, "OpoTests"), 
                  /** @type {string} */
                  logo = ot.settings.get(["application_logo", "logo"], null, "https://opotests.k3y.pw/images/logo.webp"), 
                  /** @type {string} */
                  link = ot.settings.get(["application_link", "application_url", "link", "url"], null, "https://opotests.k3y.pw"), 
                  /** @type {string} */
                  git = ot.settings.get(["application_git", "git"], null, "https://git.k3y.pw/KyMAN/OpoTests/"), 
                  /** @type {Object.<string, number>} */
                  screen = {x : 0, y : 0};

            ot.preload("#" + id, (base, asynchronous, ok) => {
                ok && setInterval(() => {
                    if(base.offsetWidth !== screen.x || base.offsetHeight !== screen.y){

                        /** @type {number} */
                        const cells = Number(base.getAttribute("data-cells")), 
                              /** @type {number} */
                              size = Math.min(
                                  screen.x = base.offsetWidth, 
                                  screen.y = base.offsetHeight
                              ) / cells, 
                              /** @type {number} */
                              minimum_size = Number(base.getAttribute("data-minimum-size"));

                        base.style.fontSize = (size < minimum_size ? minimum_size : size) + "px";

                    };
                }, 1000 / ot.settings.get(["frames_per_second", "fps"], inputs, 24));
            });

            return ["div", {
                class : Utils.unique(["opo-tests", "base-view", id].concat(ot.settings.get(["class", "classes"], inputs, []))).join(" "), 
                id : id, 
                data_hash : id, 
                data_application : name, 
                data_logo : logo, 
                data_link : link, 
                data_git : git, 
                data_cells : ot.settings.get("cells", inputs, 40), 
                data_minimum_size : ot.settings.get("minimum_size", inputs, 0),
                data_gui_mode : Check.is_dark_mode() ? "dark" : "light",
            }, [
                ["header", null, [
                    ["h1", {title : name}, [
                        ["a", {href: link, target: "_blank"}, [
                            ot.comp.image(logo, name), 
                            ["span", null, name]
                        ]]
                    ]], 
                    ["nav", {class : "header-menu"}, [
                        ["ul", null, Object.entries({
                            home : link, 
                            git : git
                        }).map(([key, link]) => ["li", {
                            data_i18n : key, 
                            data_i18n_without : true, 
                            title : ot.i18n.get(key)
                        }, [
                            ["a", {
                                href : link, 
                                target : "_blank", 
                            }, [
                                ot.comp.icon(key),
                                ot.comp.i18n(key)
                            ]]
                        ]])]
                    ]]
                ]], 
                ["main"], 
                ["footer", null, [
                    ["p", {class : "licenses"}, [
                        ["span", {class : "copyright"}, "© 2025-2026 KyMAN"],
                        ["a", {
                            class : "cc-by-nc-sa-4", 
                            href : "https://creativecommons.org/licenses/by-nc-sa/4.0/", 
                            target : "_blank", 
                            data_i18n : "cc_by_nc_sa_4", 
                            data_i18n_without : true,
                            title : ot.i18n.get("cc_by_nc_sa_4", null, "Creative Commons BY-NC-SA (Attribution-NoCommerce-ShareDAlike) 4.0")
                        }, [
                            ot.comp.i18n("cc_by_nc_sa_4", "span", "Creative Commons BY-NC-SA (Attribution-NoCommerce-ShareDAlike) 4.0"), 
                            ot.comp.image("https://licensebuttons.net/l/by-nc-sa/3.0/88x31.png", "cc_by_nc_sa_4", "Creative Commons BY-NC-SA (Attribution-NoCommerce-ShareDAlike) 4.0")
                        ]],
                    ]]
                ]]
            ]];
        };

        constructor();

    };

    return BaseView;
})();