/* ===================== 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.player-current {
        color: var(--ap-color-player-current, #ee00ee);
    }
    
    #value.player-other {
        color: var(--ap-color-player-other, #fafad2);
    }
    
`);

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

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

export default class DataGridCellAPUser 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 {alias, current} = value;
            this.#valueEl.innerText = alias;
            this.#valueEl.className = `player-${current ? "current" : "other"}`;
        }
    }

}

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