/* ===================== AUTOGENERATED SOURCE IMPORT ===================== */

import Template from "/emcJS/util/html/template/HTMLTemplate.js";

const TPL = new Template(`
    <input id="input" type="number" value="0" />
    <slot id="children">
        <button id="droptarget" class="placeholder" title="Add element">...</button>
    </slot>
`);

import GlobalStyle from "/emcJS/util/html/template/CSSTemplate.js";

const STYLE = new GlobalStyle(`
    #input {
        flex-grow: 1;
        height: 2em;
        padding: 0px 7px;
        margin: 0.2em;
        color: var(--input-text-color, #000000);
        background-color: var(--input-back-color, #ffffff);
        background-image: var(--input-back-image, none);
        border-style: solid;
        border-width: var(--input-border-width, 2px);
        border-color: var(--input-border-color, #222222);
        border-radius: var(--input-border-radius, 6px);
        font-size: 1em;
    }
    #input:focus {
        box-shadow: 0 0 2px 2px var(--input-focus-color, #06b5ff);
        outline: none;
    }
    #input:disabled {
        color: var(--input-disabled-text-color, #757575) !important;
        background-color: var(--input-disabled-back-color, #999999) !important;
        background-image: var(--input-disabled-back-image, none) !important;
        border-color: var(--input-disabled-border-color, #6a6a6a) !important;
        cursor: default !important;
    }
    #input::placeholder {
        color: var(--input-placeholder-text-color, #757575);
    }
    
`);

/* ======================================================================= */

import AbstractElement from "./AbstractElement.js";

export default class AbstractRestrictorElement extends AbstractElement {

    #placeholderEl;

    #inputEl;

    #type;

    constructor(type, caption) {
        super(caption);
        const els = TPL.generate();
        STYLE.apply(this.shadowRoot);
        /* --- */
        this.shadowRoot.getElementById("body").append(els);
        this.#type = type;
        /* --- */
        this.#placeholderEl = this.shadowRoot.getElementById("droptarget");
        this.#placeholderEl.ondragover = AbstractElement.allowDrop;
        this.#placeholderEl.ondrop = AbstractElement.dropOnPlaceholder;
        this.#placeholderEl.onclick = (event) => {
            const e = new Event("placeholderclicked", {
                bubbles: true,
                cancelable: true
            });
            e.name = event.target.parentElement.name;
            this.dispatchEvent(e);
            event.stopPropagation();
        };
        this.#inputEl = this.shadowRoot.getElementById("input");
        this.#inputEl.onchange = () => {
            this.value = parseInt(this.#inputEl.value) || 0;
            this.dispatchEvent(new Event("valuechange", {
                bubbles: true,
                cancelable: true
            }));
        };
    }

    connectedCallback() {
        if (this.editable) {
            this.#placeholderEl.disabled = false;
            this.#inputEl.disabled = false;
        } else {
            this.#placeholderEl.disabled = true;
            this.#inputEl.disabled = true;
        }
    }

    get value() {
        return this.getAttribute("value");
    }

    set value(val) {
        this.setAttribute("value", val);
    }

    getElement(forceCopy = false) {
        const node = super.getElement(forceCopy);
        node.value = this.value;
        return node;
    }

    toJSON() {
        return {
            type: this.#type,
            content: this.childList.map((e) => e.toJSON())[0],
            value: parseInt(this.value) || 0
        };
    }

    loadLogic(logic) {
        if (!!logic && !!logic.content) {
            this.value = parseInt(logic.value) || 0;
            let cl;
            if (logic.content.category) {
                cl = AbstractElement.getReference(logic.content.category, logic.content.type);
            } else {
                cl = AbstractElement.getReference(logic.content.type);
            }
            const node = new cl;
            node.loadLogic(logic.content);
            this.append(node);
        }
    }

    get childList() {
        const ch = Array.from(this.children).filter((node) => node instanceof AbstractElement);
        if (ch.length) {
            return [ch[0]];
        }
        return [];
    }

    static get observedAttributes() {
        const attr = AbstractElement.observedAttributes;
        attr.push("value");
        return attr;
    }

    attributeChangedCallback(name, oldValue, newValue) {
        super.attributeChangedCallback(name, oldValue, newValue);
        switch (name) {
            case "disabled":
            case "template": {
                if (oldValue != newValue) {
                    if (this.editable) {
                        this.#placeholderEl.disabled = false;
                        this.#inputEl.disabled = false;
                    } else {
                        this.#placeholderEl.disabled = true;
                        this.#inputEl.disabled = true;
                    }
                }
            } break;
            case "value": {
                if (oldValue != newValue) {
                    this.shadowRoot.getElementById("input").value = parseInt(newValue) || 0;
                }
            } break;
        }
    }

    checkValidity() {
        return this.childList.length === 1 && this.childList[0].checkValidity();
    }

}
