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

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

const TPL = new Template(`
    <p id="value"></p>
    <input is="emc-i18n-input" id="input" type="number">
`);

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

const STYLE = new GlobalStyle(`
    #content {
        justify-content: flex-end;
    }
    
    p {
        font-size: 1.2em;
        font-family: monospace;
        text-align: right;
    }
    
    :host([editable]:not([editable="false"])) #value {
        display: none;
    }
    
    :host([editable]:not([editable="false"])) #input {
        display: block;
    }
    
    /* --- */
    #input {
        display: none;
        appearance: none;
        flex-grow: 0;
        width: 100%;
        min-width: 3em;
        height: 2em;
        padding: 0px 7px;
        margin: 0px;
        margin-right: auto;
        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: 1rem;
        text-align: end;
        -moz-appearance: textfield;
    }
    
    #input:focus {
        box-shadow: 0 0 2px 3px var(--input-focus-color, #06b5ff);
        outline: none;
        z-index: 1;
    }
    
    :host(:invalid) #input {
        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;
    }
    
`);

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


import {debounce} from "../../../../../../util/Debouncer.js";
import EventTargetManager from "../../../../../../util/event/EventTargetManager.js";
import DataGridCell from "../DataGridCell.js";
import "../../../../../i18n/builtin/I18nInput.js";

export default class DataGridCellNumber extends DataGridCell {

    #valueEl;

    #inputEl;

    #inputEventManager;

    constructor(dataGridId) {
        super(dataGridId);
        this.shadowRoot.getElementById("content").append(TPL.generate());
        STYLE.apply(this.shadowRoot);
        /* --- */
        this.#valueEl = this.shadowRoot.getElementById("value");
        this.#inputEl = this.shadowRoot.getElementById("input");
        /* --- */
        this.#inputEventManager = new EventTargetManager(this.#inputEl);
        this.#inputEventManager.set("input", (event) => {
            this.#onInput(event);
        });
    }

    set decimals(val) {
        this.getIntAttribute("decimals", val);
    }

    get decimals() {
        return this.setIntAttribute("decimals");
    }

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

    attributeChangedCallback(name, oldValue, newValue) {
        super.attributeChangedCallback(name, oldValue, newValue);
        if (oldValue != newValue) {
            switch (name) {
                case "editable": {
                    if (this.editable) {
                        this.#inputEventManager.active = true;
                    } else {
                        this.#inputEventManager.active = false;
                    }
                } break;
                case "disabled": {
                    this.#inputEl.disabled = this.disabled;
                } break;
                case "readonly": {
                    if (this.readonly) {
                        this.#inputEl.setAttribute("readonly", "");
                    } else {
                        this.#inputEl.removeAttribute("readonly");
                    }
                } break;
                case "decimals": {
                    this.onValueChange(this.value);
                } break;
            }
        }
    }

    onValueChange(value) {
        if (this.decimals != null && this.decimals >= 0) {
            value = parseFloat(value) || 0;
            value = value.toFixed(this.decimals);
        }
        this.#valueEl.innerText = value;
        this.#valueEl.title = value;
        this.#inputEl.value = parseFloat(value);
    }

    #onInput = debounce((event) => {
        event.stopPropagation();
        event.preventDefault();
        let value = parseFloat(this.#inputEl.value);
        if (this.decimals != null && this.decimals >= 0) {
            value = parseFloat(value.toFixed(this.decimals));
        }
        this.value = value;
        const ev = new Event("edit", {bubbles: true});
        ev.data = {
            value,
            action: this.action,
            columnName: this.columnName,
            rowKey: this.rowKey
        };
        this.dispatchEvent(ev);
    }, 300);

}

DataGridCell.registerCellType("number", DataGridCellNumber, 100);
customElements.define("emc-datagrid-cell-number", DataGridCellNumber);
