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

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

const TPL = new Template(`
    <div id="container">
        <select id="input" class="settings-input" value="true">
            <option is="emc-i18n-option" value="default" i18n-value="Default"></option>
            <option is="emc-i18n-option" value="custom" i18n-value="Custom"></option>
        </select>
        <emc-listselect id="selection" multiple="true">
            <option is="emc-i18n-option" value="key" i18n-value="dungeonstatetypeactive.key"></option>
            <option is="emc-i18n-option" value="bosskey" i18n-value="dungeonstatetypeactive.bosskey"></option>
            <option is="emc-i18n-option" value="silver_rupees" i18n-value="dungeonstatetypeactive.silver_rupees"></option>
            <option is="emc-i18n-option" value="map" i18n-value="dungeonstatetypeactive.map"></option>
            <option is="emc-i18n-option" value="compass" i18n-value="dungeonstatetypeactive.compass"></option>
            <option is="emc-i18n-option" value="reward" i18n-value="dungeonstatetypeactive.reward"></option>
            <option is="emc-i18n-option" value="type" i18n-value="dungeonstatetypeactive.type"></option>
            <option is="emc-i18n-option" value="hint" i18n-value="dungeonstatetypeactive.hint"></option>
        </emc-listselect>
    </div>
    
`);

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

const STYLE = new GlobalStyle(`
    :host {
        padding: 0 !important;
        border: none !important;
        background-color: transparent !important;
    }
    
    #container {
        display: flex;
        flex-direction: column;
        padding: 0;
        border: none;
        background-color: transparent;
    }
    
    #input {
        position: relative;
        box-sizing: border-box;
        height: 2em;
        color: var(--input-text-color, #000000);
        background-color: var(--input-back-color, #ffffff);
        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: 1rem;
    }
    
    #input.append-bottom {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    
    #input:focus {
        box-shadow: 0 0 2px 2px var(--input-focus-color, #06b5ff);
        outline: none;
    }
    
    #input:focus:not(:focus-visible) {
        box-shadow: none;
        outline: none;
    }
    
    #selection {
        display: none;
        border-style: solid;
        border-width: var(--input-border-width, 2px);
        border-color: var(--input-border-color, #222222);
        border-top: none;
        border-radius: 0 0 var(--input-border-radius, 6px) var(--input-border-radius, 6px);
    }
    
    #selection.active {
        display: flex;
    }
    
`);

const CONFIG_FIELDS = [
    {
        "type": "StringInput",
        "name": "name",
        "label": "Name",
        "value": ""
    },
    {
        "type": "StringInput",
        "name": "label",
        "label": "Label",
        "value": ""
    },
    {
        "type": "TextInput",
        "name": "desc",
        "label": "Description",
        "value": ""
    },
    {
        "type": "TextInput",
        "name": "tooltip",
        "label": "Tooltip",
        "value": ""
    },
    {
        "type": "SwitchInput",
        "name": "resettable",
        "label": "Resettable",
        "value": false
    },
    {
        "type": "BoolOrLogicInput",
        "name": "enabled",
        "label": "Enabled",
        "value": true
    },
    {
        "type": "BoolOrLogicInput",
        "name": "visible",
        "label": "Visible",
        "value": true
    }
];

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

import CustomFormElementDelegating from "/emcJS/ui/element/CustomFormElementDelegating.js";
import FormElementRegistry from "/emcJS/data/registry/form/FormElementRegistry.js";
import {
    deepClone
} from "/emcJS/util/helper/DeepClone.js";
import {
    isEqual
} from "/emcJS/util/helper/Comparator.js";
import {
    safeSetAttribute
} from "/emcJS/util/helper/ui/NodeAttributes.js";
import "/emcJS/ui/input/ListSelect.js";

export default class DungeonStateActiveTypes extends CustomFormElementDelegating {

    static get formConfigurationFields() {
        return deepClone(CONFIG_FIELDS);
    }

    #value;

    #inputEl;

    #selectionEl;

    constructor() {
        super();
        this.shadowRoot.append(TPL.generate());
        STYLE.apply(this.shadowRoot);
        /* --- */
        this.#inputEl = this.shadowRoot.getElementById("input");
        this.#selectionEl = this.shadowRoot.getElementById("selection");
        this.#inputEl.addEventListener("change", () => {
            const value = this.#inputEl.value;
            if (value === "custom") {
                this.#inputEl.classList.add("append-bottom");
                this.#selectionEl.classList.add("active");
                this.value = this.#selectionEl.value;
            } else {
                this.#inputEl.classList.remove("append-bottom");
                this.#selectionEl.classList.remove("active");
                this.value = "";
            }
        });
        this.#selectionEl.addEventListener("change", () => {
            const value = this.#inputEl.value;
            if (value === "custom") {
                this.value = this.#selectionEl.value;
            }
        });
    }

    connectedCallback() {
        super.connectedCallback();
        const value = this.value;
        this.#applyValue(value);
    }

    formDisabledCallback(disabled) {
        super.formDisabledCallback(disabled);
        this.#inputEl.disabled = disabled;
        this.#selectionEl.disabled = disabled;
    }

    formResetCallback() {
        super.formResetCallback();
        const value = this.value;
        this.#applyValue(value);
    }

    set value(value) {
        if (value !== "" && !Array.isArray(value)) {
            value = "";
        }
        if (!isEqual(this.#value, value)) {
            this.#applyValue(value);
            this.#value = value;
            this.internals.setFormValue(value);
            /* --- */
            this.dispatchEvent(new Event("change"));
        }
    }

    get value() {
        return this.#value;
    }

    set readonly(val) {
        this.setBooleanAttribute("readonly", val);
    }

    get readonly() {
        return this.getBooleanAttribute("readonly");
    }

    static get observedAttributes() {
        return ["name", "value"];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        super.attributeChangedCallback(name, oldValue, newValue);
        switch (name) {
            case "name":{
                if (oldValue != newValue) {
                    this.#selectionEl.name = newValue;
                }
            } break;
            case "value": {
                if (oldValue != newValue) {
                    this.#applyValueAttribute(newValue);
                    if (!this.isChanged) {
                        this.#applyValue(this.value);
                    }
                }
            } break;
        }
    }

    #applyValue(value) {
        if (Array.isArray(value)) {
            this.#inputEl.value = "custom";
            this.#selectionEl.classList.add("active");
            this.#selectionEl.value = value;
        } else {
            this.#inputEl.value = "default";
            this.#selectionEl.classList.remove("active");
        }
    }

    #applyValueAttribute(value) {
        if (Array.isArray(value)) {
            this.#inputEl.value = "custom";
            this.#selectionEl.classList.add("active");
            safeSetAttribute(this.#selectionEl, "value", value);
        } else {
            this.#inputEl.value = "default";
            this.#selectionEl.classList.remove("active");
        }
    }

}

FormElementRegistry.register("DungeonStateActiveTypes", DungeonStateActiveTypes);
customElements.define("ootrt-input-dungeonstateactivetype", DungeonStateActiveTypes);
