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

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

const TPL = new Template(`
    <input is="emc-i18n-input" id="input" type="text" readonly tabindex="-1">
    <emc-i18n-tooltip i18n-tooltip="edit">
        <button id="button"></button>
    </emc-i18n-tooltip>
    
`);

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

const STYLE = new GlobalStyle(`
    #input {
        flex-grow: 1;
        width: 100px;
        min-width: 100px;
        height: 2em;
        padding: 0px 7px;
        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) 0px 0px var(--input-border-radius, 6px);
        font-size: 1em;
        pointer-events: none;
    }
    
    #input:focus {
        box-shadow: 0 0 2px 3px var(--input-focus-color, #06b5ff);
        outline: none;
        z-index: 1;
    }
    
    :host(:invalid) #input {
        color: var(--input-invalid-text-color, #000000);
        background-color: var(--input-invalid-back-color, #ffebeb);
        background-image: var(--input-invalid-back-image, none);
        border-color: var(--input-invalid-border-color, #ff4444);
    }
    
    :host(:invalid) #input:focus {
        box-shadow: 0 0 2px 3px var(--input-invalid-focus-color, #ff2500);
    }
    
    #input::placeholder {
        color: var(--input-placeholder-text-color, #757575);
    }
    
    #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;
        opacity: 1 !important;
    }
    
    /* --- */
    #button {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 2em;
        height: 2em;
        padding: 0px;
        margin: 0 0 0 calc(-1 * var(--input-border-width, 2px));
        color: var(--input-button-text-color, #000000);
        background-color: var(--input-button-back-color, #ffffff);
        background-image: var(--input-button-back-image, none);
        border-style: solid;
        border-width: var(--input-border-width, 2px);
        border-color: var(--input-border-color, #222222);
        border-radius: 0 var(--input-border-radius, 6px) var(--input-border-radius, 6px) 0;
        font-size: 1rem;
        font-weight: bold;
        cursor: pointer;
        appearance: none;
    }
    
    #button:hover {
        color: var(--input-button-hover-text-color, #000000);
        background-color: var(--input-button-hover-back-color, #b3e5ec);
        background-image: var(--input-button-hover-back-image, none);
    }
    
    #button:focus {
        box-shadow: 0 0 2px 3px var(--input-focus-color, #06b5ff);
        outline: none;
        z-index: 1;
    }
    
    :host(:invalid) #button {
        color: var(--input-button-invalid-text-color, #000000);
        background-color: var(--input-button-invalid-back-color, #ffebeb);
        background-image: var(--input-button-invalid-back-image, none);
        border-color: var(--input-invalid-border-color, #ff4444);
    }
    
    :host(:invalid) #button:hover {
        color: var(--input-button-invalid-hover-text-color, #000000);
        background-color: var(--input-button-invalid-hover-back-color, #ff9987);
        background-image: var(--input-button-invalid-hover-back-image, none);
    }
    
    :host(:invalid) #button:focus {
        box-shadow: 0 0 2px 3px var(--input-invalid-focus-color, #ff2500);
    }
    
    #button:disabled {
        color: var(--input-button-disabled-text-color, #757575) !important;
        background-color: var(--input-button-disabled-back-color, #999999) !important;
        background-image: var(--input-button-disabled-back-image, none) !important;
        border-color: var(--input-disabled-border-color, #6a6a6a) !important;
        cursor: default !important;
        opacity: 1 !important;
    }
    
    #button::before {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        margin-left: -4px;
        font-family: monospace;
        font-size: 1.2em;
        line-height: 1em;
        letter-spacing: -4px;
        content: "...";
    }
    
    #button[readonly]:not([readonly="false"]) {
        pointer-events: none;
    }
    
`);

const CONFIG_FIELDS = [
    {
        "type": "StringInput",
        "name": "placeholder",
        "label": "Placeholder",
        "value": ""
    }
]
;

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

import AbstractFormElement from "../../AbstractFormElement.js";
import FormElementRegistry from "../../../../../data/registry/form/FormElementRegistry.js";
import {deepClone} from "../../../../../util/helper/DeepClone.js";
import {registerFocusable} from "../../../../../util/helper/html/ElementFocusHelper.js";
import {safeSetAttribute} from "../../../../../util/helper/ui/NodeAttributes.js";
import "../../../../i18n/I18nLabel.js";
import "../../../../i18n/I18nTooltip.js";

export default class ActionInput extends AbstractFormElement {

    static get formConfigurationFields() {
        return [...super.formConfigurationFields, ...deepClone(CONFIG_FIELDS)];
    }

    static get changeDebounceTime() {
        return 0;
    }

    #inputEl;

    #buttonEl;

    #valueRenderer = null;

    constructor() {
        super();
        this.shadowRoot.getElementById("field").append(TPL.generate());
        STYLE.apply(this.shadowRoot);
        /* --- */
        this.#inputEl = this.shadowRoot.getElementById("input");
        this.#inputEl.addEventListener("focus", () => {
            this.#buttonEl.focus();
        });
        this.#buttonEl = this.shadowRoot.getElementById("button");
        this.#buttonEl.addEventListener("click", (event) => {
            event.preventDefault();
            event.stopPropagation();
            const ev = new Event("action");
            ev.value = this.value;
            this.dispatchEvent(ev);
        });
    }

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

    validityCallback(message) {
        this.#inputEl.setCustomValidity(message);
    }

    focus(options) {
        this.#buttonEl.focus(options);
    }

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

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

    static get observedAttributes() {
        return [...super.observedAttributes, "placeholder", "readonly"];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        super.attributeChangedCallback(name, oldValue, newValue);
        switch (name) {
            case "placeholder": {
                if (oldValue != newValue) {
                    safeSetAttribute(this.#inputEl, "i18n-placeholder", newValue);
                }
            } break;
            case "readonly": {
                if (oldValue != newValue) {
                    safeSetAttribute(this.#buttonEl, "readonly", newValue);
                }
            } break;
        }
    }

    renderValue(value) {
        if (this.#valueRenderer != null) {
            this.#inputEl.value = this.#valueRenderer(value);
        } else {
            this.#inputEl.value = value;
        }
    }

    setValueRenderer(renderer) {
        if (typeof renderer === "function") {
            this.#valueRenderer = renderer;
            this.#inputEl.value = this.#valueRenderer(this.value);
        } else {
            this.#valueRenderer = null;
            this.#inputEl.value = this.value;
        }
    }

}

FormElementRegistry.register("ActionInput", ActionInput);
customElements.define("emc-input-action", ActionInput);
registerFocusable("emc-input-action");
