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

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

const TPL = new Template(`
    <emc-i18n-tooltip id="tooltip">
        <button>
            <div id="bar1"></div>
            <div id="bar2"></div>
            <div id="bar3"></div>
        </button>
    </emc-i18n-tooltip>
`);

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

const STYLE = new GlobalStyle(`
    :host {
        display: inline-block;
        width: 40px;
        height: 40px;
        padding: 0px;
    }
    /*
    TODO add navigation button variables
    */
    button {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        border: none;
        border-radius: 0;
        background-color: var(--navigation-back-color, #ffffff);
        background-image: var(--navigation-back-image, none);
        cursor: pointer;
        outline: none;
        appearance: none;
    }
    button:hover {
        box-shadow: inset 0px 0px 2px 1px;
    }
    button:active {
        box-shadow: inset 0px 0px 4px 3px;
    }
    div {
        position: relative;
        width: 30px;
        height: 4px;
        background-color: var(--navigation-text-color, #000000);
        transition: transform 0.4s ease-in-out;
    }
    #bar1 {
        transform: translateY(-4px);
    }
    #bar2 {
        transform-origin: left;
    }
    #bar3 {
        transform: translateY(4px);
    }
    :host([open]:not([open="false"])) #bar1 {
        transform: translateY(4px) rotate(45deg);
    }
    :host([open]:not([open="false"])) #bar2 {
        transform: scaleX(0);
    }
    :host([open]:not([open="false"])) #bar3 {
        transform: translateY(-4px) rotate(-45deg);
    }
    
`);

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

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

export default class HamburgerButton extends CustomElement {

    #tooltipEl;

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

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

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

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

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

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

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

}

customElements.define("emc-navbar-hamburger", HamburgerButton);
