import { IgniteProperty } from "../ignite-html/ignite-html.js";

class Toast {
    static info(content, timeout = 4000, closable = true) {
        return this.makeToast("?", content, "info", timeout, closable);
    }

    static warning(content, timeout = 4000, closable = true) {
        return this.makeToast("!", content, "warning", timeout, closable);
    }

    static error(content, timeout = 4000, closable = true) {
        return this.makeToast("×", content, "error", timeout, closable);
    }

    static success(content, timeout = 4000, closable = true) {
        return this.makeToast("✔", content, "success", timeout, closable);
    }

    static makeToast(icon, content, type, timeout, closable) {
        var color = "";
        if (type == "error") {
            color = "#ff7979";
        } else if (type == "warning") {
            color = "#ffc107";
        } else if (type == "info") {
            color = "#2196f3";
        } else if (type == "success") {
            color = "#10c469";
        }

        document.querySelectorAll(".ignite-html-toast").forEach(element => element.remove());

        var temp = document.createElement('div');
        temp.innerHTML = `
            <div class="ignite-html-toast ${type ? type : ""}" style="display: flex; align-items: center; flex-direction: column; left: 50%; top: 100%; position: absolute; transform: translate(-50%, -100%); z-index: 999999; width: 100%; padding: 2em 1em 2em 1em; background-color: transparent;">
                <div style="box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); border-radius: 7em; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 1em; padding-left: 1em; padding-right: 1em; padding-top: 0.5em; padding-bottom: 0.5em; background-color: #fff;">
                    <div class="icon" style="${!icon ? "display: none;" : "display: flex;"}font-size: 1.5em; background-color: ${color}; border-radius: 100%; min-width: 1.5em; min-height: 1.5em; align-items: center; justify-content: center; color: #fff;">${icon ? icon : ""}</div>
                    <div class="message" style="text-align: center;">${content ? content : ""}</div>
                    <button class="close" onClick="this.parentElement.parentElement.remove();" style="${!closable ? "display: none;" : ""} background-color: transparent; border: none; font-size: 1.75em; color: rgba(0,0,0,0.5);">&times;</button>
                </div>
            </div>
        `.trim();
        var toast = temp.firstChild;

        window.document.body.appendChild(toast);

        if (timeout != -1) {
            setTimeout(() => {
                toast.remove();
            }, timeout);
        }

        return toast;
    }
}

window.Toast = Toast;

export {
    Toast
}