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

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

const TPL = new Template(`
    <gt-itemgrid-interactive id="content">
    </gt-itemgrid-interactive>
`);

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

const STYLE = new GlobalStyle(`
    :host {
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
    }
    :host {
        display: block;
        width: min-content;
        height: min-content;
    }
    #content {
        display: content;
    }
    .item-row {
        display: flex;
    }
    .item {
        display: flex;
        padding: 2px;
    }
    .text,
    .icon,
    .empty {
        display: inline-block;
        width: 40px;
        height: 40px;
        padding: 2px;
    }
    .icon {
        background-position: center;
        background-repeat: no-repeat;
    }
`);

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

import Panel from "/emcJS/ui/layout/Panel.js";
import GridsResource from "../../../data/resource/GridsResource.js";
import "../../itemgrid/interactive/ItemGridInteractive.js";

export default class ItemGrid extends Panel {

    #contentEl;

    constructor() {
        super();
        this.shadowRoot.append(TPL.generate());
        STYLE.apply(this.shadowRoot);
        /* --- */
        this.#contentEl = this.shadowRoot.getElementById("content");
    }

    connectedCallback() {
        this.setAttribute("data-fontmod", "items");
        // if (!this.items && this.grid) {
        //     const config = GridsResource.get(this.grid);
        //     this.loadGrid(config);
        // }
    }

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

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

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

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

    static get observedAttributes() {
        return ["items", "grid"];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (oldValue != newValue) {
            switch (name) {
                case "items": {
                    if (newValue) {
                        const config = JSON.parse(newValue);
                        this.#contentEl.loadGrid(config);
                    } else if (this.grid) {
                        const config = GridsResource.get(newValue);
                        this.#contentEl.loadGrid(config);
                    } else {
                        this.#contentEl.loadGrid();
                    }
                } break;
                case "grid": {
                    if (!this.items) {
                        if (newValue) {
                            const config = GridsResource.get(newValue);
                            this.#contentEl.loadGrid(config);
                        } else {
                            this.#contentEl.loadGrid();
                        }
                    }
                } break;
            }
        }
    }

}

Panel.registerReference("itemgrid", ItemGrid);
customElements.define("gt-itemgrid", ItemGrid);
