import { MainStateManager } from "../MainStateManager";
import { Argument } from "../Page/ElementsOfFormFactory/Argument";
import { IMainStateFactory } from "../Types";

export class ModalFactory {
    public mainStateManager: MainStateManager;
    public id: string;
    public modalRoot: HTMLElement;
    public backdropDivElement: HTMLDivElement;
    public mainDivElement: HTMLDivElement;
    public forceUpdate = () => { }
    public classes: string;

    constructor(
        public mainStateFactory: IMainStateFactory,
        public children: JSX.Element | null,
        public isWaitingModal?: boolean,
        public onCloseModal?: () => void,
        public argument?: Argument,
        classes?: string,
    ) {
        this.mainStateManager = this.mainStateFactory.mainStateManager;
        this.id = Math.random().toString() + '-' + new Date().getMilliseconds().toString();
        this.mainStateFactory.elementsOfForm.childModal = this;
        this.classes = typeof classes === 'string' ? classes.trim() : '';


        const classMainName = isWaitingModal ? 'modal__waiting__container' : 'modal__main__container';
        let tempModalRoot = document.getElementById(classMainName);
        if (!tempModalRoot) {
            tempModalRoot = document.createElement('div');
            tempModalRoot.className = classMainName;
            tempModalRoot.id = classMainName;

            const root = document.getElementById('root')!;
            root.insertAdjacentElement('beforebegin', tempModalRoot);
        }

        this.modalRoot = tempModalRoot;

        const modalsCount = this.mainStateManager.modals.length;

        this.backdropDivElement = document.createElement('div');
        const classBackDropName = isWaitingModal ? 'backdrop-waiting-show' : 'backdrop-main-show';
        this.backdropDivElement.classList.add(classBackDropName);
        this.backdropDivElement.style.zIndex = `${4000 + modalsCount}`;
        this.backdropDivElement.style.opacity = '0';
        this.backdropDivElement.onclick = () => this.closeByClick(this);

        this.mainDivElement = document.createElement('div');
        const classModalMainShowName = isWaitingModal ? 'modal-waiting-show' : 'modal-main-show';
        this.mainDivElement.classList.add(classModalMainShowName);
        if (this.classes) {
            const splited = this.classes.split(' ');
            if (splited.length > 0) {
                splited.forEach(i => {
                    this.mainDivElement.classList.add(i);
                })
            }
        }
        this.mainDivElement.style.zIndex = `${4000 + modalsCount}`;

        // if (this.mainStateManager.Modaling.modals.length > 1) {
        //     this.backdropDivElement.classList.add('bgc-transparent');
        // }

        this.modalRoot.appendChild(this.backdropDivElement);
        this.modalRoot.appendChild(this.mainDivElement);
    }

    closeByClick(e: any) {
        if (e.isWaitingModal) {
            return;
        }

        e.close();
    }

    close() {
        this.mainStateManager.closeModal(this);
        this.mainStateFactory.elementsOfForm.childModal = undefined;
        this.onCloseModal && this.onCloseModal();
        this.mainStateFactory.elementsOfForm.onCloseModalGetFocus && this.mainStateFactory.elementsOfForm.onCloseModalGetFocus();
        this.mainStateFactory.elementsOfForm.onCloseModalOpenNexWindow && this.mainStateFactory.elementsOfForm.onCloseModalOpenNexWindow();
    }
}