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

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

const TPL = new Template(`
    <emc-i18n-tooltip id="tooltip">
        <button>
            <emc-i18n-label id="label"></emc-i18n-label>
        </button>
    </emc-i18n-tooltip>
`);

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

const STYLE = new GlobalStyle(`
    :host {
        display: flex;
    }
    /*
    TODO add navigation button variables
    */
    button {
        display: flex;
        justify-content: var(--justify-content, center);
        align-items: center;
        width: 100%;
        height: 100%;
        padding: 0 10px;
        border: none;
        border-radius: 0;
        background-color: var(--navigation-back-color, #ffffff);
        background-image: var(--navigation-back-image, none);
        color: var(--navigation-text-color, #000000);
        font-weight: bold;
        font-size: 1em;
        text-align: center;
        cursor: pointer;
        outline: none;
        text-decoration: none;
        appearance: none;
        user-select: none;
        white-space: pre;
    }
    button:hover {
        box-shadow: inset 0px 0px 2px 1px;
    }
    button:active {
        box-shadow: inset 0px 0px 4px 3px;
    }
    button:focus-visible {
        box-shadow: 0px 0px 4px 3px;
    }
    button:disabled {
        opacity: 0.3;
    }
    :host([expand="closed"]) button::before,
    :host([expand="open"]) button::before {
        display: block;
        width: 6px;
        height: 0px;
        margin-right: 5px;
        box-sizing: border-box;
        border-top: solid transparent 4px;
        border-left: solid var(--navigation-text-color, #000000) 6px;
        border-bottom: solid transparent 4px;
        border-right: solid transparent 0px;
        transition: transform 0.2s ease-in-out;
        transform-origin: 3px 4px;
        content: "";
    }
    :host([expand="open"]) button::before {
        transform: rotate(90deg);
    }
    
`);

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

import CustomElement from "../../element/CustomElement.js";
import "../../i18n/I18nLabel.js";
import "../../i18n/I18nTooltip.js";

export default class Button extends CustomElement {

    #tooltipEl;

    #labelEl;

    constructor() {
        super();
        this.shadowRoot.append(TPL.generate());
        STYLE.apply(this.shadowRoot);
        /* --- */
        this.#tooltipEl = this.shadowRoot.getElementById("tooltip");
        this.#labelEl = this.shadowRoot.getElementById("label");
    }

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

    set expand(val) {
        if (val == "open" || val == "closed") {
            this.setAttribute("expand", val);
        } else {
            this.removeAttribute("expand");
        }
    }

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

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

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

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

    static get observedAttributes() {
        return ["content", "tooltip"];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (oldValue != newValue) {
            switch (name) {
                case "content":
                    this.#labelEl.i18nValue = newValue;
                    break;
                case "tooltip":
                    this.#tooltipEl.i18nTooltip = newValue;
                    break;
            }
        }
    }

}

customElements.define("emc-navbar-button", Button);
