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

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

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

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

const STYLE = new GlobalStyle(`
    * {
        box-sizing: border-box;
    }
    :host {
        position: relative;
        display: flex;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    #choice {
        display: flex;
        flex-wrap: wrap;
        padding: 5px;
    }
    #choice div {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 200px;
        height: 100px;
        margin: 5px;
        color: white;
        background-color: #222;
        cursor: pointer;
    }
`);

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

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

export default class EditorChoice extends CustomElement {

    constructor() {
        super();
        this.shadowRoot.append(TPL.generate());
        STYLE.apply(this.shadowRoot);
        /* --- */
    }

    register(name) {
        const el = document.createElement("DIV");
        el.innerHTML = name;
        el.addEventListener("click", () => {
            const ev = new Event("choice");
            ev.app = name;
            this.dispatchEvent(ev);
        });
        this.shadowRoot.getElementById("choice").append(el);
    }

}

customElements.define("jse-choice", EditorChoice);
