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

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

const TPL = new Template(`
    <div id="container"></div>
    
`);

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

const STYLE = new GlobalStyle(`
    :host {
        margin: 2px;
    }
    
    #container {
        position: relative;
        display: flex;
        align-items: flex-start;
        box-sizing: border-box;
        padding: 8px;
        color: var(--datalist-entry-text-color, #000000);
        background-color: var(--datalist-entry-back-color, #ffffff);
        background-image: var(--datalist-entry-back-image, none);
        border-style: solid;
        border-width: var(--datalist-entry-border-width, 2px);
        border-color: var(--datalist-entry-border-color, #000000);
        border-radius: var(--datalist-entry-border-radius, 4px);
        font-size: 1em;
        font-family: Arial, Helvetica, sans-serif;
        word-break: break-all;
    }
    
    #container:hover {
        color: var(--datalist-entry-hover-text-color, #000000);
        background-color: var(--datalist-entry-hover-back-color, #ffffff);
        background-image: var(--datalist-entry-hover-back-image, none);
    }
    
`);

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

import CustomElement from "../../../element/CustomElement.js";

export default class DataListEntry extends CustomElement {

    #containerEl;

    constructor() {
        super();
        TPL.apply(this.shadowRoot);
        STYLE.apply(this.shadowRoot);
        /* --- */
        this.#containerEl = this.shadowRoot.getElementById("container");
        /* --- */
        this.addEventListener("contextmenu", (event) => {
            event.stopPropagation();
            event.preventDefault();
            const menuEvent = new Event("menu", {
                bubbles: true,
                cancelable: true
            });
            menuEvent.data = {key: this.key};
            this.dispatchEvent(menuEvent);
        });
    }

    setData(data) {
        this.#containerEl.innerText = `${this.key}\n${JSON.stringify(data)}`;
    }

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

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

}

customElements.define("emc-datalist-entry", DataListEntry);
