interface ToastOptions {
    "id"?: string;
    "message"?: string;
    "status"?: "success" | "error" | "warning" | "info";
    "description"?: string;
    "duration"?: number;
    "position"?: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end";
    "message-icon"?: string;
    "view-button"?: boolean;
    "close-button"?: boolean;
    "remove-after-close"?: boolean;
}

interface ToastEvents {
    bcmToastView?: (event: any) => void;
    bcmToastClose?: (event: any) => void;
    bcmToastOpen?: (event: any) => void;
}

export class Toast {
    element: any;
    options: ToastOptions & ToastEvents;

    /**
     * Creates an instance of Toast.
     * @param {ToastOptions & ToastEvents} [options={}]
     * @example
     * const toast = new Toast();
     * @example
     * const toast = new Toast({
     * id: "my-toast",
     * message: "Hello World",
     * status: "success",
     * description: "This is a description",
     * duration: 5000,
     * position: "top",
     * "message-icon": "check",
     * "view-button": true,
     * "close-button": true,
     * "remove-after-close": true, // This will remove the toast from the DOM after it is closed
     * bcmToastView: (event) => {
     * // This Event fires when the view button is clicked
     * // do something
     * },
     * bcmToastClose: (event) => {
     * // This Event fires when the toast is closed
     * // do something
     * },
     * bcmToastOpen: (event) => {
     * // This Event fires when the toast is opened
     * // do something
     * }
     * });
     * toast.show();
     */
    constructor(options: ToastOptions & ToastEvents) {
        this.options = options;

        this.createElement();
        this.listeners();
        this.setAttributes();
        return this.element;
    }

    private createElement() {
        let el: any;
        this.options?.id && (el = document.getElementById(this.options.id));
        if (el) {
            this.element = el;
        } else {
            const tag = "bcm-toast";
            this.element = document.createElement(tag);
        }

        document.body.appendChild(this.element);
        return this.element;
    }

    private listeners() {
        this.options.bcmToastView && this.element.addEventListener("bcm-toast-view", this.options.bcmToastView);
        this.options.bcmToastClose && this.element.addEventListener("bcm-toast-close", this.options.bcmToastClose);
        this.options.bcmToastOpen && this.element.addEventListener("bcm-toast-open", this.options.bcmToastOpen);
    }

    private setAttributes() {
        for (let key in this.options) {
            this.element.setAttribute(key, this.options[key]);
        }
    }

    /**
     * Shows the toast
     * @returns {HTMLElement} The element that was shown
     * @example
     * const toast = new Toast();
     * toast.show();
     * @example
     * const toast = new Toast();
     * toast.show().then(() => {
     *   // do something
     * });
     * @example
     * const toast = new Toast();
     * toast.show().then(() => {
     *  // do something
     * }).catch(() => {
     * // do something else
     * });
     */
    show() {
        this.element.show();
        return this.element;
    }

    /**
     * Hides the toast
     * @returns {HTMLElement} The element that was hidden
     * @example
     * const toast = new Toast();
     * toast.hide();
     * @example
     * const toast = new Toast();
     * toast.hide().then(() => {
     *    // do something
     * });
     * @example
     * const toast = new Toast();
     * toast.hide().then(() => {
     *   // do something
     * }).catch(() => {
     *  // do something else
     * });
     */
    hide() {
        this.element.hide();
        return this.element;
    }
}