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

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

const TPL = new Template(`
    <emc-icon id="access"></emc-icon>
    <emc-icon id="type"></emc-icon>
    <div id="filters"></div>
`);

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

const STYLE = new GlobalStyle(`
    :host {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        padding: 2px;
        margin-left: 5px;
        background-color: var(--gt-badge-back-color, #77777744);
        border: 1px solid var(--navigation-back-color, #ffffff);
        border-radius: 2px;
        user-select: none;
    }
    emc-icon {
        width: 24px;
        height: 24px;
        margin: 1px;
    }
    emc-icon:not([src]),
    emc-icon[src=""] {
        display: none;
    }
    #filters {
        display: contents;
    }
`);

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

import CustomElement from "/emcJS/ui/element/CustomElement.js";
import EventMultiTargetManager from "/emcJS/util/event/EventMultiTargetManager.js";
import EventTargetListenerElementMixin from "/emcJS/ui/mixin/EventTargetListenerElementMixin.js";
import "/emcJS/ui/icon/Icon.js";
import FilterResource from "../data/resource/FilterResource.js";
import SettingsObserver from "../util/observer/SettingsObserver.js";
import BadgeFilterIconHandler from "../util/handler/BadgeFilterIconHandler.js";

const colorBlindObserver = new SettingsObserver("color_blind_badge_icons");
const showFiltersObserver = new SettingsObserver("show_filter_badges");

const ACCESS_VALUES = [
    "opened",
    "available",
    "unavailable",
    "possible"
];

export default class Badge extends EventTargetListenerElementMixin(CustomElement) {

    #colorBlindEl;

    #filtersEl;

    #filterIconEls = new Map();

    #badgeFilterIconHandlerManager = new EventMultiTargetManager();

    constructor() {
        super();
        this.shadowRoot.append(TPL.generate());
        STYLE.apply(this.shadowRoot);
        /* --- */
        const filter = FilterResource.get();
        this.#filtersEl = this.shadowRoot.getElementById("filters");
        for (const name in filter) {
            const value = filter[name];
            if (value.badge) {
                const el = document.createElement("emc-icon");
                this.#filterIconEls.set(`badge-${name}`, el);
                this.#filtersEl.append(el);
            }
        }
        this.#filtersEl.style.display = showFiltersObserver.value ? "" : "none";
        this.switchEventTarget("showFilters", showFiltersObserver);
        this.setEventTargetListener("showFilters", "change", (event) => {
            this.#filtersEl.style.display = event.value ? "" : "none";
        });
        /* --- */
        this.#colorBlindEl = this.shadowRoot.getElementById("access");
        if (this.#colorBlindEl != null) {
            this.#colorBlindEl.style.display = colorBlindObserver.value ? "" : "none";
        }
        this.switchEventTarget("colorBlind", colorBlindObserver);
        this.setEventTargetListener("colorBlind", "change", (event) => {
            if (this.#colorBlindEl != null) {
                this.#colorBlindEl.style.display = event.value ? "" : "none";
            }
        });
        /* --- */
        this.#badgeFilterIconHandlerManager.set("change", (event) => {
            const {ref, icon} = event.data;
            const el = this.#filterIconEls.get(`badge-${ref}`);
            el.src = icon;
        });
    }

    get typeIcon() {
        return this.getAttribute("type-icon");
    }

    set typeIcon(val) {
        this.setAttribute("type-icon", val);
    }

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

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

    static get observedAttributes() {
        return ["type-icon", "access"];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (oldValue != newValue) {
            switch (name) {
                case "type-icon": {
                    const typeEl = this.shadowRoot.getElementById("type");
                    if (typeEl != null) {
                        typeEl.src = newValue;
                    }
                } break;
                case "access": {
                    if (this.#colorBlindEl != null) {
                        if (ACCESS_VALUES.indexOf(newValue) >= 0) {
                            this.#colorBlindEl.src = `images/icons/access_${newValue}.svg`;
                        } else {
                            this.#colorBlindEl.src = "";
                        }
                    }
                } break;
            }
        }
    }

    setFilterData(data) {
        this.#badgeFilterIconHandlerManager.clearTargets();
        const filter = FilterResource.get();
        if (data != null) {
            for (const name in filter) {
                const value = filter[name];
                if (value.badge) {
                    const handler = new BadgeFilterIconHandler(name, value, data[name]);
                    this.#badgeFilterIconHandlerManager.addTarget(handler);
                    const el = this.#filterIconEls.get(`badge-${name}`);
                    el.src = handler.icon;
                }
            }
        }
    }

}

customElements.define("gt-badge", Badge);
