/* ===================== 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="checkbox">
`);

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

const STYLE = new GlobalStyle(`
    #content {
        justify-content: center !important;
        align-items: center !important;
    }
    
    p {
        font-size: 1.5em !important;
        font-family: monospace !important;
        text-align: center !important;
    }
    
    #input {
        display: none;
        width: 100%;
        font-size: inherit;
    }
    
    :host([editable]:not([editable="false"])) #value {
        display: none;
    }
    
    :host([editable]:not([editable="false"])) #input {
        display: block;
        appearance: none;
        flex-grow: 0;
        width: 3em;
        height: 2em;
        padding: 2px;
        margin: 0px;
        color: var(--input-text-color, #000000);
        background-color: var(--switch-unchecked-back-color, #ffd68a);
        background-image: var(--switch-unchecked-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;
        cursor: pointer;
    }
    
    :host([editable]:not([editable="false"])) #input:checked {
        background-color: var(--switch-checked-back-color, #9ee1ec);
        background-image: var(--switch-checked-back-image, none);
    }
    
    :host([editable]:not([editable="false"])) #input:indeterminate {
        background-color: var(--switch-indeterminate-back-color, #ffffff);
        background-image: var(--switch-indeterminate-back-image, none);
    }
    
    :host([editable]:not([editable="false"])) #input:focus {
        box-shadow: 0 0 2px 3px var(--input-focus-color, #06b5ff);
        outline: none;
    }
    
    :host([editable]:not([editable="false"])) #input::after {
        display: block;
        width: calc(2em - (2 * var(--input-border-width, 2px)));
        height: calc(2em - (4 * var(--input-border-width, 2px)));
        background-color: var(--button-back-color, #cccccc);
        background-image: var(--button-back-image, none);
        border-style: solid;
        border-width: var(--input-border-width, 2px);
        border-color: var(--input-border-color, #222222);
        border-radius: calc(var(--input-border-radius, 6px) / 2);
        box-sizing: border-box;
        content: "";
    }
    
    :host([editable]:not([editable="false"])) #input:hover::after {
        background-color: var(--button-hover-back-color, #000000);
        background-image: var(--button-hover-back-image, none);
    }
    
    :host([editable]:not([editable="false"])) #input:checked::after {
        margin-left: auto;
    }
    
    :host([editable]:not([editable="false"])) #input:indeterminate::after {
        margin-left: auto;
        margin-right: auto;
    }
    
    /* --- */
    #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 {
        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 EventTargetManager from "../../../../../../util/event/EventTargetManager.js";
import DataGridCell from "../DataGridCell.js";
import "../../../../../i18n/builtin/I18nInput.js";

export default class DataGridCellBoolean 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("change", (event) => {
            this.#onInput(event);
        });
    }

    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;
            }
        }
    }

    onValueChange(value) {
        value = !!value && value !== "false";
        this.#valueEl.innerText = value ? "☑" : "☐";
        this.#valueEl.title = value ? "True" : "False";
        this.#inputEl.checked = value;
    }

    #onInput(event) {
        event.stopPropagation();
        event.preventDefault();
        const value = this.#inputEl.checked;
        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);
    }

}

DataGridCell.registerCellType("boolean", DataGridCellBoolean, 70);
customElements.define("emc-datagrid-cell-boolean", DataGridCellBoolean);
