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

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

const TPL = new Template(`
    <div class="container">
        <div class="text">
            <emc-i18n-label id="title"></emc-i18n-label>
            <div class="subtext">
                <emc-i18n-label id="type"></emc-i18n-label>
                <emc-i18n-label id="category"></emc-i18n-label>
            </div>
        </div>
        <div id="tags"></div>
    </div>
`);

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

const STYLE = new GlobalStyle(`
    :host {
        display: flex;
        width: 100%;
        user-select: none;
        padding: 3px;
        border-bottom: solid 1px var(--list-border-bottom-color, #000000);
        border-top: solid 1px var(--list-border-top-color, #000000);
        font-size: 16px;
        overflow: hidden;
    }
    
    .container {
        display: flex;
        width: 100%;
        cursor: pointer;
    }
    
    .text {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;
    }
    .text #title {
        justify-content: flex-start;
    }
    .text .subtext {
        display: flex;
        justify-content: flex-start;
        overflow: hidden;
        font-size: 0.7em;
        font-style: italic;
        height: 1.2em;
        white-space: nowrap;
    }
    .text .subtext #category {
        margin-left: 8px;
        padding-left: 8px;
        border-left: solid 1px var(--page-text-color, #000000);
    }
    .text .subtext #category:not([i18n-value]),
    .text .subtext #category[i18n-value=""] {
        display: none;
    }
    
    #tags {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        padding: 2px;
        margin-left: 5px;
        border: 1px solid var(--navigation-back-color, #ffffff);
        border-radius: 2px;
        font-size: 16px;
        user-select: none;
    }
    #tags:empty {
        display: none;
    }
    #tags emc-labeledicon {
        width: 24px;
        height: 24px;
        margin: 1px;
    }
    
`);

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

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

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

export default class EntranceSelectOption extends BaseClass {

    constructor() {
        super();
        this.shadowRoot.append(TPL.generate());
        STYLE.apply(this.shadowRoot);
        /* --- */
    }

    applyDefaultValues() {
        const typeEl = this.shadowRoot.getElementById("type");
        const categoryEl = this.shadowRoot.getElementById("category");
        const tagsEl = this.shadowRoot.getElementById("tags");
        if (this.ref === "") {
            typeEl.i18nValue = "entrance_type[unbound]";
        } else if (this.ref === "0") {
            typeEl.i18nValue = "entrance_type[empty]";
        } else {
            typeEl.i18nValue = "";
        }
        categoryEl.i18nValue = "";
        tagsEl.innerHTML = "";
    }

    applyStateValues(state) {
        const typeEl = this.shadowRoot.getElementById("type");
        const categoryEl = this.shadowRoot.getElementById("category");
        const tagsEl = this.shadowRoot.getElementById("tags");
        typeEl.i18nValue = `entrance_type[${state.props.type}]`;
        // area
        const areaState = AreaStateManager.get(state.props.area.name);
        // area - category
        const category = areaState?.props.category;
        if (category) {
            categoryEl.i18nValue = `area_category[${category}]`;
        } else {
            categoryEl.i18nValue = "";
        }
        // area - tags
        tagsEl.innerHTML = "";
        const areaContentHints = areaState?.props.areaContentHints;
        if (areaContentHints) {
            const areaTagConfig = WorldListState.config.areaContentHints;
            for (const tag in areaContentHints) {
                const value = parseInt(areaContentHints[tag]);
                if (!isNaN(value) && value > 0) {
                    const areaTagData = areaTagConfig[tag];
                    if (areaTagData != null) {
                        const tagEl = document.createElement("emc-labeledicon");
                        tagEl.src = areaTagData.icon;
                        if (areaTagData.counting) {
                            tagEl.text = value;
                            tagEl.halign = "end";
                            tagEl.valign = "end";
                        }
                        tagsEl.append(tagEl);
                    }
                }
            }
        }
    }

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

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

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

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

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

    attributeChangedCallback(name, oldValue, newValue) {
        if (oldValue != newValue) {
            switch (name) {
                case "ref": {
                    // state
                    const state = EntranceStateManager.get(newValue);
                    this.switchState(state);
                    /* text */
                    const titleEl = this.shadowRoot.getElementById("title");
                    if (titleEl != null) {
                        titleEl.i18nValue = `entrance[${newValue}]`;
                    }
                } break;
            }
        }
    }

    get textRef() {
        return `entrance[${this.ref}]`;
    }

    get comparatorText() {
        return this.shadowRoot.textContent;
    }

}

customElements.define("gt-entrance-select-option", EntranceSelectOption);
