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

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

const TPL = new Template(`
    <slot id="content"></slot>
    <div id="info"></div>
`);

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

const STYLE = new GlobalStyle(`
    #info {
        color: var(--contextmenu-info-text-color, #000000);
        font-size: 0.5em;
        margin-left: 1em;
        font-style: italic;
    }
    #info:empty {
        display: none;
    }
    :host(:hover) #info {
        color: var(--contextmenu-info-hover-text-color, #ffffff);
    }
    
`);

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

import CustomElement from "../../element/CustomElement.js";

export default class ContextMenuItem extends CustomElement {

    #infoEl;

    constructor() {
        super();
        this.shadowRoot.append(TPL.generate());
        STYLE.apply(this.shadowRoot);
        /* --- */
        this.#infoEl = this.shadowRoot.getElementById("info");
    }

    set info(val) {
        if (val != null) {
            this.setAttribute("info", val);
        } else {
            this.removeAttribute("info");
        }
    }

    get info() {
        return this.getAttribute("info") || "";
    }

    static get observedAttributes() {
        return ["info"];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (oldValue != newValue) {
            switch (name) {
                case "info": {
                    if (newValue != null) {
                        this.#infoEl.innerHTML = newValue;
                    } else {
                        this.#infoEl.innerHTML = "";
                    }
                } break;
            }
        }
    }

}

customElements.define("emc-contextmenuitem", ContextMenuItem);
