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

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

const TPL = new Template(`
    <button id="close" title="close">
        <emc-symbol-close></emc-symbol-close>
    </button>
    <div id="autoclose"></div>
`);

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

const STYLE = new GlobalStyle(`
    @keyframes autoclose {
        0% { width: calc(100% - 27px) }
        100% { width: 0 }
    }
    #close {
        position: absolute;
        top: 2px;
        right: 2px;
        display: flex;
        width: 15px;
        height: 15px;
        border: none;
        align-items: center;
        justify-content: center;
        color: var(--color, #000000);
        background-color: transparent;
        cursor: pointer;
        appearance: none;
        font-size: 10px;
        line-height: 1em;
        pointer-events: all;
    }
    #close:hover {
        color: var(--background-color, #ffffff);
        background-color: var(--color, #ff0000);
    }
    #close:focus {
        outline: none;
    }
    #autoclose {
        position: absolute;
        right: 22px;
        top: 7px;
        width: 0px;
        height: 4px;
        background-color: var(--color, #ff0000);
    }
    :host(:hover) #autoclose {
        animation-play-state: paused !important;
    }
    
`);

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

import "../../symbols/CloseSymbol.js";
import AbstractMessage from "./AbstractMessage.js";

// TODO needs popin/popout animation

const TIME = 0;

export default class Message extends AbstractMessage {

    #closeEl;

    #autocloseEL;

    constructor(opts = {}) {
        const {
            text, time = TIME
        } = opts;
        super({text});
        this.shadowRoot.append(TPL.generate());
        STYLE.apply(this.shadowRoot);
        /* --- */
        this.#closeEl = this.shadowRoot.getElementById("close");
        this.#closeEl.addEventListener("click", (event) => {
            event.stopPropagation();
            this.remove();
        });
        /* --- */
        const waitTime = parseInt(time) || TIME;
        if (time > 0) {
            this.#autocloseEL = this.shadowRoot.getElementById("autoclose");
            this.#autocloseEL.style.animation = `autoclose ${waitTime}s linear 1`;
            this.#autocloseEL.addEventListener("animationend", (event) => {
                event.stopPropagation();
                this.remove();
            });
        }
    }

    static get defaultSlot() {
        return "top-right";
    }

}

customElements.define("emc-message", Message);
