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

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

const TPL = new Template(`
    <emc-i18n-tooltip id="tooltip" i18n-tooltip="toggle detailed map (currently deactivated)">
        <emc-icon id="icon" src="/images/icons/detail_area_off.svg"></emc-icon>
    </emc-i18n-tooltip>
    
`);

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

const STYLE = new GlobalStyle(`
    :host {
        display: block;
        width: 40px;
        height: 40px;
        background-color: var(--page-back-color, #ffffff);
        border-style: solid;
        border-width: 2px;
        border-color: var(--page-border-color-inverted, #ffffff);
    }
    
    #icon {
        position: absolute;
        box-sizing: content-box;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        width: 100%;
        height: 100%;
        background-position: center;
        background-size: contain;
        overflow: hidden;
        cursor: pointer;
    }
    
`);

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

import CustomElement from "/emcJS/ui/element/CustomElement.js";
import "/emcJS/ui/i18n/I18nLabel.js";
import "/emcJS/ui/icon/Icon.js";
import SettingsObserver from "../../../../../util/observer/SettingsObserver.js";

const showDetailedMapsObserver = new SettingsObserver("show_detailed_maps");

export default class WorldMapDetailedMapsButton extends CustomElement {

    #tooltipEl;

    #iconEl;

    constructor() {
        super();
        this.shadowRoot.append(TPL.generate());
        STYLE.apply(this.shadowRoot);
        /* --- */
        this.#tooltipEl = this.shadowRoot.getElementById("tooltip");
        this.#iconEl = this.shadowRoot.getElementById("icon");
        /* --- */
        showDetailedMapsObserver.onChange(() => {
            this.#applyDetailedMapsValue();
        });
        this.#applyDetailedMapsValue();
        /* --- */
        this.addEventListener("click", () => {
            showDetailedMapsObserver.value = !showDetailedMapsObserver.value;
        });
    }

    #applyDetailedMapsValue() {
        const showDetailedMaps = showDetailedMapsObserver.value;
        if (showDetailedMaps) {
            this.#tooltipEl.i18nTooltip = "toggle detailed maps (currently activated)";
            this.#iconEl.src = "/images/icons/detail_area_on.svg";
        } else {
            this.#tooltipEl.i18nTooltip = "toggle detailed maps (currently deactivated)";
            this.#iconEl.src = "/images/icons/detail_area_off.svg";
        }
    }

}

customElements.define("gt-worldmap-detailedmaps-button", WorldMapDetailedMapsButton);

