class Toast {
    static _toast = []
    static timer = null
    
    static show(message, duration) {
        this._toast.push({
            msg: message,
            dur: duration ? duration : 2000
        })
        this.#check()
    }

    static #check() {
        if (this._toast.length == 0) return;
        if (this.timer == null) {
            const t = this._toast.shift()
            let d = document.createElement('div')
            d.innerHTML = `<p style="border-radius: 30px;padding: 8px 16px;background-color: #dd000080;color: white; pointer-events: auto;">${t.msg}</p>`
            d.style = 'position: fixed;margin: auto;font-size: 16px;left: 0;right: 0;bottom: 40px;z-index: 100;align-items: center;justify-content: center;display: none;pointer-events: none'
            document.body.appendChild(d)
            $(d).fadeIn(300)
            this.timer = setTimeout(() => {
                $(d).fadeOut(300, () => {
                    document.body.removeChild(d)
                    this.timer = null
                    this.#check()
                })
            }, t.dur + 300)
        }
    }
}