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

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

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

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

const STYLE = new GlobalStyle(`
    #icon {
        position: absolute;
        box-sizing: content-box;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        width: 40px;
        height: 40px;
        background-color: var(--page-back-color, #ffffff);
        background-position: center;
        background-size: contain;
        border-style: solid;
        border-width: 2px;
        border-color: var(--page-border-color-inverted, #ffffff);
        overflow: hidden;
        cursor: pointer;
    }
    
    #marker {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 18px;
        height: 18px;
        margin: 1px;
        background-color: var(--world-entry-status-available-color, #00ff00);
        border-radius: 50%;
        font-size: 0.8em;
        color: #000000;
        font-weight: bold;
        border-style: solid;
        border-width: 3px;
        border-color: var(--page-back-color, #ffffff);
    }
    
`);

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

import CustomElement from "/emcJS/ui/element/CustomElement.js";
import {
    mix
} from "/emcJS/util/Mixin.js";
import "/emcJS/ui/i18n/I18nLabel.js";
import WorldStateManagerRegistry from "../../../../../statemanager/WorldStateManagerRegistry.js";
import WorldListState from "../../../../../state/world/WorldListState.js";
import StateDataEventManagerMixin from "../../../../mixin/StateDataEventManagerMixin.js";
import "../entries/Location.js";
import "../entries/Area.js";
import "../entries/Exit.js";

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

export default class WorldMapMetaAreaButton extends BaseClass {

    #iconEl;

    #markerEl;

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

        /* state handler */
        this.registerStateHandler("listChange", () => {
            this.checkVisibility();
        });
        this.registerStateHandler("access", () => {
            this.refreshAccess();
        });

        /* --- */
        const {icon = "", ref} = WorldListState.config.metaArea;
        this.#iconEl.style.backgroundImage = `url("${icon}")`;
        const state = WorldStateManagerRegistry.get(ref?.type)?.get(ref?.name);
        this.switchState(state);
        this.checkVisibility();
        this.refreshAccess();
    }

    checkVisibility() {
        const state = this.getState();
        if (state != null) {
            const list = state.getList();
            if (list != null && list.length > 0) {
                this.style.display = "";
            } else {
                this.style.display = "none";
            }
        } else {
            this.style.display = "none";
        }
    }

    refreshAccess() {
        const state = this.getState();
        if (state != null && state.access.entrances > 0) {
            this.#markerEl.style.display = "";
        } else {
            this.#markerEl.style.display = "none";
        }
    }

}

customElements.define("gt-worldmap-metaarea-button", WorldMapMetaAreaButton);

