"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;
        /** @type {string|null} */
        let web_socket_id = null;
        
        /**
         * @returns {void}
         * @access private
         */
        const constructor = () => {};

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

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

            web_socket_id = anp.web_sockets_clients.add("AAA", "https://localhost:18000/");

            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", 
                    data_id : anp.unique_keys.create()
                }, [
                    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);
        };

        this.write_response = (id, fragment) => {
            
            let box = document.querySelector(".aichat .messages>[data-type=bot][data-id='" + id + "']");
            
            if(!box){
                if(!document.querySelector(".aichat .messages>[data-type=user][data-id='" + id + "']"))
                    return;
                box = Common.HTML(".aichat .messages", Fieldset({
                    class : "message", 
                    data_type : "box", 
                    data_id : id
                }, [
                    anp.components.i18n("assistant", "legend"),
                    Div({class : "content"}, "")
                ]), true)[0];
            };
            
            box.querySelector(".content").innerHTML += fragment;
            
        };

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