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

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

const TPL = new Template(`
    <div id="icon"></div>
    
`);

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

const STYLE = new GlobalStyle(`
    :host {
        display: inline-flex;
        width: 1em;
        height: 1em;
        user-select: none;
    }
    :host(:hover) {
        background-size: 100%;
    }
    #icon {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-origin: content-box;
        pointer-events: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 2px;
        color: white;
        font-size: 0.8em;
        text-shadow: -1px 0 1px black, 0 1px 1px black, 1px 0 1px black, 0 -1px 1px black;
        flex-grow: 0;
        flex-shrink: 0;
        min-height: 0;
        white-space: normal;
        line-height: 0.7em;
        font-weight: bold;
        word-break: normal;
    }
    
`);

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

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

function getAlign(value) {
    switch (value) {
        case "start":
            return "flex-start";
        case "end":
            return "flex-end";
        default:
            return "center";
    }
}

export default class LabeledIcon extends CustomElement {

    #iconEl;

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

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

    set src(val) {
        this.setAttribute("src", val);
    }

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

    set text(val) {
        this.setAttribute("text", val);
    }

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

    set halign(val) {
        this.setAttribute("halign", val);
    }

    get valign() {
        return this.getAttribute("halign");
    }

    set valign(val) {
        this.setAttribute("valign", val);
    }

    static get observedAttributes() {
        return ["src", "text", "halign", "valign"];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (oldValue != newValue) {
            switch (name) {
                case "src":
                    this.#iconEl.style.backgroundImage = `url("${newValue}")`;
                    break;
                case "text":
                    this.#iconEl.innerHTML = newValue;
                    break;
                case "halign":
                    this.#iconEl.style.justifyContent = getAlign(newValue);
                    break;
                case "valign":
                    this.#iconEl.style.alignItems = getAlign(newValue);
                    break;
            }
        }
    }

}

customElements.define("emc-labeledicon", LabeledIcon);
