import {ButtonType} from "./ButtonType";

export class Modal {

    private static currentModalId: string | undefined = "";

    private _title: string = "iTender";
    private _id: string = "";
    private _loader: boolean = false;
    private _buttons: { type: string, content: string, onclick: Function }[] = [];
    private _leftCentered: boolean = false;
    private _elements: HTMLElement[] = [];

    set leftCentered(value: boolean) {
        this._leftCentered = value;
    }

    private static modalInClose = false;

    constructor(id, title: string) {
        this._id = id;
        this._title = title;

        let t = document.createElement("h1");
        t.innerText = title;
        this._elements.push(t);
    }

    public static isModalOpen(): boolean {
        return !(!this.currentModalId);
    }


    public addContent(element: HTMLElement) {
        this._elements.push(element);
    }


    set id(value: string) {
        this._id = value;
    }

    set loader(value: boolean) {
        this._loader = value;
    }

    public addButton(type: ButtonType, content: string, onclick: Function = () => {}): HTMLButtonElement {
        let btn = document.createElement("button");
        btn.classList.add("btn", "btn-" + type);
        btn.onclick = () => onclick(btn);
        btn.innerText = content;
        btn.value = content;

        this._elements.push(btn);
        return btn;
    }



    public open(): Promise<void> {
        return new Promise(async (resolve) => {
            /* if (this._leftCentered) {
                 this._content = "<div style='text-align: left; padding-left: 2%;'>" + this._content;
             }*/ //todo

            /* if (this._loader)
                 this._content += "<br><div class=\"lds-ellipsis\">\n" +
                     "  <div></div><div></div><div></div><div></div>\n" +
                     "</div>";*/ // todo

            /*if (this._leftCentered) {
                this._content += "</div>";
            }*/

            let elements = this._elements;
            let id = this._id;

            function tryOpen() {
                if (Modal.modalInClose) {
                    setTimeout(tryOpen, 50);
                    return;
                }
                resolve();
                Modal.open(elements, id);
            }

            tryOpen();
        });
    }

    /**
     * @param elements
     * @param id
     */
    private static open(elements: HTMLElement[], id?: string): Promise<void> {
        return new Promise((resolve, reject) => {
            const modal = document.getElementById("modal");
            const modalContent = document.getElementById("modalInnerContent");

            if (!modal || !modalContent) {
                reject();
                return;
            }

            modalContent.classList.add("modalBlendIn");
            modal.classList.add("modalBlendIn");

            setTimeout(() => {
                modalContent.classList.remove("modalBlendIn");
                modal.classList.remove("modalBlendIn");
                resolve();
            }, 800);

            modalContent.innerHTML = "";
            elements.forEach((val) => modalContent.append(val));
            //modalContent.innerHTML = `<h1 id="modalTitle">${title}</h1>${content}`;
            modal.style.display = "block";

            this.currentModalId = id ? id : "null";
        });

    }

    public close() : void {
        Modal.close(this._id);
    }

    public static close(id?: string): void {
        if (id && this.currentModalId != id)
            return;

        Modal.modalInClose = true;

        const modal = document.getElementById("modal");
        const modalContent = document.getElementById("modal-content");
        const modalInnerContent = document.getElementById("modalInnerContent");

        if (!modal || !modalContent || !modalInnerContent)
            return;

        modalContent.classList.add("modalBlendOut");
        modal.classList.add("modalBlendOut");

        setTimeout(() => {
            modal.style.display = "none";
            modalInnerContent.innerHTML = "";
            modalContent.classList.remove("modalBlendOut");
            modal.classList.remove("modalBlendOut");
            this.modalInClose = false;
        }, 800);

        this.currentModalId = undefined;
    }
}