pragma-views2/webcomponents/pragma-assistant/pragma-assistant.js

import {BaseElement} from "../../baremetal/lib/base-element.js";

export class PragmaAssistant extends BaseElement {

    constructor() {
        super();
        this.isOpen = true;
    }

    connectedCallback() {
        super.connectedCallback();
        this.initTemplate();
        
        this.changeAssistantContentHandler = this.changeAssistantContent.bind(this);
        this.showAssistHandler = this.showAssist.bind(this);
        this.clearAssistHandler = this.clearAssist.bind(this);
        this.toggleAssistHandler = this.toggleAssist.bind(this);
        this.hideAssistHandler = this.close.bind(this);
        
        const closeButton = this.querySelector("#assistantClose");
        this.registerEvent(closeButton, "click", this.close.bind(this));

        window.eventEmitter.on("assistant", this.changeAssistantContentHandler);
        window.eventEmitter.on("show-assistant", this.showAssistHandler);
        window.eventEmitter.on("hide-assistant", this.hideAssistHandler);
        window.eventEmitter.on("toggle-assistant", this.toggleAssistHandler);
        window.eventEmitter.on("clear-assistant", this.clearAssistHandler);
    }

    disconnectedCallback() {
        window.eventEmitter.remove("assistant", this.changeAssistantContentHandler);
        window.eventEmitter.remove("show-assistant", this.showAssistHandler);
        window.eventEmitter.remove("clear-assistant", this.clearAssistHandler);
        window.eventEmitter.remove("hide-assistant", this.hideAssistHandler);
        window.eventEmitter.remove("toggle-assistant", this.toggleAssistHandler);

        this.clearAssist();
        this.pragmaForm = null;

        this.changeAssistantContentHandler = null;
        this.showAssistHandler = null;
        this.clearAssistHandler = null;
        this.hideAssistHandler = null;
        this.toggleAssistHandler = null;
    }

    initTemplate() {
        const instance = document.importNode(window.templates.get("pragma-assistant-template"), true);
        this.appendChild(instance);
        this.pragmaForm = this.querySelector("pragma-form");
    }
    
    changeState(isOpen) {
        if (isOpen == true) {
            this.isOpen = true;
            this.classList.remove("close");
            const assistantWrapper = this.querySelector(".assistant-wrapper");
            assistantWrapper.addEventListener("transitionend", () => {
                this.dispatchToggle();
            }, {once: true})
        }
        else {
            this.isOpen = false;
            this.classList.add("close");
            this.dispatchToggle();
        }
    }

    dispatchToggle() {
        window.eventEmitter.emit("assistant-toggled", {isOpen: this.isOpen});
    }

    close() {
        this.changeState(false);
    }

    changeAssistantContent(options) {
        if (this.pragmaForm != undefined) {
            this.pragmaForm.context = options.viewModel;
            this.pragmaForm.model = options.viewModel.model;
            this.pragmaForm.schema = options.schema;
        }
    }

    showAssist() {
        this.changeState(true);
    }

    toggleAssist() {
        this.changeState(!this.isOpen);
    }

    clearAssist() {
        delete this.pragmaForm.model;
        delete this.pragmaForm.context;
        this.pragmaForm.schema = null;
        delete this.pragmaForm.schema;
    }

    performAction(args) {
        if (context != undefined && context.performAction != undefined) {
            context.performAction(args);
        }
    }
}

customElements.define('pragma-assistant', PragmaAssistant);