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

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

const STYLE = new GlobalStyle(`
    :host {
        cursor: pointer;
    }
    #text {
        text-align: center;
    }
`);

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

import AbstractMessage from "./AbstractMessage.js";
// import TPL from "./Toast.js.html" assert {type: "html"};

// TODO needs popin/popout animation

const TIME = 5;

export default class Toast extends AbstractMessage {

    constructor(opts = {}) {
        const {
            text, time = TIME
        } = opts;
        super({text});
        STYLE.apply(this.shadowRoot);
        /* --- */
        this.addEventListener("click", (event) => {
            event.stopPropagation();
            this.remove();
        });
        /* --- */
        const waitTime = parseInt(time) || TIME;
        if (time > 0) {
            setTimeout(() => {
                this.remove();
            }, waitTime * 1000);
        }
    }

}

customElements.define("emc-toast", Toast);
