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

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

const TPL = new Template(`
    <p id="value"></p>
    
`);

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

const STYLE = new GlobalStyle(`
    #content {
        justify-content: center;
    }
    
    #value {
        white-space: pre-wrap;
    }
    
    #value.item-progressive {
        color: var(--ap-color-item-progressive, #af99ef);
    }
    
    #value.item-useful {
        color: var(--ap-color-item-useful, #6d8be8);
    }
    
    #value.item-normal {
        color: var(--ap-color-item-normal, #00eeee);
    }
    
    #value.item-trap {
        color: var(--ap-color-item-trap, #fa8072);
    }
    
`);

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

import DataGridCell from "/emcJS/ui/dataview/datagrid/components/cell/DataGridCell.js";

export default class DataGridCellAPItem extends DataGridCell {

    #valueEl;

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

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

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

    onValueChange(value) {
        if (value == null) {
            this.#valueEl.innerText = "";
            this.#valueEl.className = "";
        } else {
            const {item, itemClass} = value;
            this.#valueEl.innerText = item;
            this.#valueEl.className = `item-${itemClass}`;
        }
    }

}

DataGridCell.registerCellType("apitems", DataGridCellAPItem, 200);
customElements.define("ootrt-grid-datagrid-cell-apitems", DataGridCellAPItem);
