"use strict";

import {Fieldset, Section, Form, Div} from "../Utils/HTMLDSL.ecma.js";
import {Common} from "../Utils/Common.ecma.js";

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

/**
 * @class AIChatComponent
 * @constructor
 * @param {!AnP} anp
 * @returns {void}
 * @access private
 * @static
 */
export const AIChatComponent = (function(){

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

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

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

        this.build = (inputs = null) => {

            const name = Common.get_value("name", inputs, "aichat");

            return Fieldset({class : "aichat"}, [
                anp.components.i18n(name, "legend"), 
                Section({class : "messages"}),
                Form({
                    method : "post",
                    action : "#",
                    on_submit : send, 
                    on_key_down : check_keys
                }, [
                    anp.components.text("message", {
                        multiline : true
                    }), 
                    anp.components.button("send", "submit")
                ])
            ]);
        };

        const send = (item, event) => {

            const text_box = item.querySelector("[name=message]"), 
                  text = text_box.value.trim();
            
            event.preventDefault();

            if(text){
                Common.HTML(".aichat .messages", Fieldset({
                    class : "message", 
                    data_type : "user"
                }, [
                    anp.components.i18n("user", "legend"),
                    Div({class : "content"}, text)
                ]));
                text_box.value = "";
            };

            return false;
        };

        const check_keys = (item, event) => {
            event.key == "Enter" && !event.shiftKey && send(item, event);
        };

        constructor();
    };
    
    return AIChatComponent;
})();