/* ===================== 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">
    <div class="footer">
        <span id="length-info"></span>
    </div>
    
`);

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

const STYLE = new GlobalStyle(`
    #input {
        flex-grow: 1;
        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);
        font-size: 1em;
    }
    
    #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;
    }
    
    /* --- */
    .footer {
        display: none;
        justify-content: flex-end;
        padding: 2px 20px;
        border-top-style: solid;
        border-top-width: var(--input-border-width, 2px);
        border-top-color: var(--input-border-color, #222222);
    }
    
    :host([maxlength]:not([maxlength=""])) .footer {
        display: flex;
    }
    
    :host(:invalid) .footer {
        border-top-color: var(--input-invalid-border-color, #ff4444);
    }
    
    :host(:disabled) .footer {
        border-top-color: var(--input-disabled-border-color, #6a6a6a) !important;
    }
    
    #length-info {
        font-size: 0.7em;
        user-select: none;
    }
    
`);

const CONFIG_FIELDS = [
    {
        "type": "StringInput",
        "name": "placeholder",
        "label": "Placeholder",
        "value": ""
    },
    {
        "type": "NumberInput",
        "name": "minlength",
        "label": "Minimum Length",
        "value": null
    },
    {
        "type": "NumberInput",
        "name": "maxlength",
        "label": "Maximum Length",
        "value": null
    },
    {
        "type": "SwitchInput",
        "name": "spellcheck",
        "label": "Check spelling",
        "value": false
    },
    {
        "type": "SimpleSelect",
        "name": "autocorrect",
        "label": "Activate autocorrect",
        "options": {
            "off": "Disable automatic correction",
            "on": "Enable automatic correction of spelling and punctuation errors"
        },
        "value": "off"
    },
    {
        "type": "SimpleSelect",
        "name": "autocapitalize",
        "label": "Activate autocapitalize",
        "options": {
            "off": "Do not automatically capitalize any text",
            "on": "Automatically capitalize the first character of each sentence",
            "words": "Automatically capitalize the first character of each word",
            "characters": "Automatically capitalize every character"
        },
        "value": "off"
    }
]
;

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

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/builtin/I18nInput.js";

// TODO add indicator for max length
// TODO add pattern (expected pattern as regexp) - validation
export default class StringInput extends AbstractFormElement {

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

    #inputEl;

    #lengthInfoEl;

    constructor() {
        super();
        this.shadowRoot.getElementById("field").append(TPL.generate());
        STYLE.apply(this.shadowRoot);
        /* --- */
        this.#lengthInfoEl = this.shadowRoot.getElementById("length-info");
        this.#inputEl = this.shadowRoot.getElementById("input");
        this.#inputEl.addEventListener("input", () => {
            this.value = this.#inputEl.value;
            this.#printLengthToMax();
        });
    }

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

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

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

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

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

    set minLength(value) {
        this.setIntAttribute("minlength", value, 0);
    }

    get minLength() {
        return this.getIntAttribute("minlength");
    }

    set maxLength(value) {
        this.setIntAttribute("maxlength", value, 0);
    }

    get maxLength() {
        return this.getIntAttribute("maxlength");
    }

    set spellcheck(value) {
        this.setBooleanAttribute("spellcheck", value);
    }

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

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

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

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

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

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

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

    static get observedAttributes() {
        return [...super.observedAttributes, "placeholder", "readonly", "minlength", "maxlength", "spellcheck", "autocapitalize", "autocomplete", "autocorrect"];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        super.attributeChangedCallback(name, oldValue, newValue);
        switch (name) {
            case "readonly": {
                if (oldValue != newValue) {
                    safeSetAttribute(this.#inputEl, name, newValue);
                }
            } break;
            case "placeholder": {
                if (oldValue != newValue) {
                    safeSetAttribute(this.#inputEl, "i18n-placeholder", newValue);
                }
            } break;
            case "minlength": {
                if (oldValue != newValue) {
                    if (this.minLength > -1) {
                        this.revalidate();
                    } else {
                        this.minLength = null;
                    }
                }
            } break;
            case "maxlength": {
                if (oldValue != newValue) {
                    if (this.maxLength > -1) {
                        this.revalidate();
                        this.#printLengthToMax();
                    } else {
                        this.maxLength = null;
                    }
                }
            } break;
            case "spellcheck": {
                if (oldValue != newValue) {
                    this.#inputEl.spellcheck = this.spellcheck;
                }
            } break;
            case "autocapitalize": {
                if (oldValue != newValue) {
                    this.#inputEl.autocapitalize = this.autocapitalize;
                }
            } break;
            case "autocomplete": {
                if (oldValue != newValue) {
                    this.#inputEl.autocomplete = this.autocomplete;
                }
            } break;
            case "autocorrect": {
                if (oldValue != newValue) {
                    this.#inputEl.autocorrect = this.autocorrect;
                }
            } break;
        }
    }

    checkValid() {
        const value = this.value;
        if (value != null && value !== "") {
            const min = this.minLength;
            if (min != null && value.length < min) {
                return `The minimum length for this field is {{0::${min}}} characters`;
            }
            const max = this.maxLength;
            if (max != null && value.length > max) {
                return `The maximum length for this field is {{0::${max}}} characters`;
            }
        }
        return super.checkValid();
    }

    renderValue(value) {
        this.#inputEl.value = value ?? "";
        this.#printLengthToMax();
    }

    #printLengthToMax() {
        if (this.maxLength != null) {
            const value = this.#inputEl.value ?? "";
            const length = value.length;
            this.#lengthInfoEl.innerText = `${length} / ${this.maxLength}`;
        }
    }

}

FormElementRegistry.register("StringInput", StringInput);
customElements.define("emc-input-string", StringInput);
registerFocusable("emc-input-string");
