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

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

const TPL = new Template(`
    <emc-i18n-tooltip i18n-tooltip="to overworld">
        <div id="back">←</div>
    </emc-i18n-tooltip>
    <emc-i18n-label id="text"></emc-i18n-label>
    <slot></slot>
    
`);

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

const STYLE = new GlobalStyle(`
    :host {
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 500px;
        padding: 10px;
        font-size: 1.5em;
        line-height: 1em;
        background-color: var(--page-back-color, #000000);
        border-style: solid;
        border-width: 2px;
        border-color: var(--page-border-color-inverted, #ffffff);
        user-select: none;
    }
    #text {
        display: block;
        flex: 1;
        font-size: .8em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    :host([access="opened"]) #text {
        color: var(--world-entry-status-opened-color, #777777);
    }
    :host([access="available"]) #text {
        color: var(--world-entry-status-available-color, #00ff00);
    }
    :host([access="unavailable"]) #text {
        color: var(--world-entry-status-unavailable-color, #ff0000);
    }
    :host([access="possible"]) #text {
        color: var(--world-entry-status-possible-color, #ffff00);
    }
    #back {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        padding: 4px;
        margin-right: 8px;
        color: var(--page-text-color, #000000);
        border-style: solid;
        border-width: 2px;
        border-color: var(--navigation-back-color, #ffffff);
        border-radius: 10px;
        font-family: monospace;
        cursor: pointer;
    }
    #back.hidden {
        display: none;
    }
    
`);

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

import CustomElement from "/emcJS/ui/element/CustomElement.js";
import {
    mix
} from "/emcJS/util/Mixin.js";
import "/emcJS/ui/i18n/I18nLabel.js";
import "/emcJS/ui/i18n/I18nTooltip.js";
import AreaStateManager from "../../../../statemanager/world/area/AreaStateManager.js";
import StateDataEventManagerMixin from "../../../mixin/StateDataEventManagerMixin.js";
import WorldListState from "../../../../state/world/WorldListState.js";

const BaseClass = mix(
    CustomElement
).with(
    StateDataEventManagerMixin
);

export default class WorldMapTitle extends BaseClass {

    #backEl;

    constructor() {
        super();
        this.shadowRoot.append(TPL.generate());
        STYLE.apply(this.shadowRoot);
        /* back button */
        this.#backEl = this.shadowRoot.getElementById("back");
        this.#backEl.addEventListener("click", () => {
            WorldListState.reset();
        });
        /* state handler */
        this.registerStateHandler("access", (event) => {
            const access = event.value;
            const accessValue = access.value;
            this.applyAccess(("" + accessValue).toLowerCase(), access);
        });
    }

    applyDefaultValues() {
        /* access */
        this.applyAccess("unavailable", {});
        /* text */
        const textEl = this.shadowRoot.getElementById("text");
        if (textEl != null) {
            textEl.i18nValue = "";
        }
    }

    applyStateValues(state) {
        /* access */
        const access = this.getStateAccess(state);
        const accessValue = access.value;
        this.applyAccess(("" + accessValue).toLowerCase(), access);
        /* text */
        const textEl = this.shadowRoot.getElementById("text");
        if (textEl != null) {
            textEl.i18nValue = `area[${state.ref}]`;
        }
    }

    getStateAccess(state) {
        return state.access;
    }

    applyAccess(value = "unavailable"/* , data = {} */) {
        this.access = value;
    }

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

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

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

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

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

    attributeChangedCallback(name, oldValue, newValue) {
        if (oldValue != newValue) {
            switch (name) {
                case "ref": {
                    const state = AreaStateManager.get(this.ref);
                    this.switchState(state);
                    /* back button */
                    if (this.#backEl != null) {
                        this.#backEl.classList.toggle("hidden", WorldListState.isDefault);
                    }
                } break;
            }
        }
    }

}

customElements.define("gt-worldmap-title", WorldMapTitle);
