import { AxiosInstance } from "axios";
import { MainStateManager } from "../MainStateManager";
import { ElementsOfFormFactory } from "../Page/ElementsOfFormFactory";
import { IMainStateFactory, OfficialAttacheFormsType } from "../Types";

type AttacheFormFactoryForm = { type: OfficialAttacheFormsType, object: { id: number } };
export class SendByLetterFactory implements IMainStateFactory {
    public get any() {
        return this as any;
    }
    public elementsOfForm: ElementsOfFormFactory;

    public id: string;
    public sendByLetterRoot: HTMLElement;
    // public backdropDivElement: HTMLDivElement;
    public mainDivElement: HTMLDivElement;
    public forceUpdate = () => { }
    public payLoad: string = 'forms';

    public forms: AttacheFormFactoryForm[] = [];

    public addForm = (type: OfficialAttacheFormsType, object: { id: number }) => {
        this.forms.push({ type, object });
    }
    public remove = (id: number) => {
        const findIndex = this.forms.findIndex(i => i.object.id === id);
        if (findIndex > -1) {
            this.forms.splice(findIndex, 1);
            this.forceUpdate();
        }
    }

    public getPayLoad = () => {
        return { [this.payLoad]: this.forms.map(i => { return { id: i.object.getProp('id'), yearId: i.object.getProp('yearId'), formType: i.type } }) };
    }
    constructor(
        public mainStateManager: MainStateManager,
        public onCloseSendByLetterForm?: () => void,
    ) {
        this.id = Math.random().toString() + '-' + new Date().getMilliseconds().toString();
        this.elementsOfForm = new ElementsOfFormFactory(this);

        let tempSendByLetterFormRoot = document.getElementById('send_by_letter_form__container');
        if (!tempSendByLetterFormRoot) {
            tempSendByLetterFormRoot = document.createElement('div');
            tempSendByLetterFormRoot.className = "send_by_letter_form__container";
            tempSendByLetterFormRoot.id = "send_by_letter_form__container";

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

        this.sendByLetterRoot = tempSendByLetterFormRoot;


        // this.backdropDivElement = document.createElement('div');
        // this.backdropDivElement.classList.add('backdrop-popup');
        // this.backdropDivElement.style.zIndex = '2000';
        // this.backdropDivElement.style.opacity = '0';
        // this.backdropDivElement.onclick = (e: any) => this.closeByClick(this);

        this.mainDivElement = document.createElement('div');
        this.mainDivElement.classList.add('send_by_letter');


        this.mainDivElement.style.position = 'fixed';
        this.mainDivElement.style.right = `${20}px`;
        this.mainDivElement.style.bottom = `${20}px`;
        this.mainDivElement.style.zIndex = '3000';
        this.mainDivElement.style.background = '#d4ecff';

        // this.sendByLetterRoot.appendChild(this.backdropDivElement);
        this.sendByLetterRoot.appendChild(this.mainDivElement);
    }

    closeByClick(e: any) {
        e.close();
    }

    close() {
        this.mainStateManager.closeSendByLetterForm();
        this.onCloseSendByLetterForm && this.onCloseSendByLetterForm();
    }


    public dispose = () => {
        this.sendByLetterRoot.removeChild(this.mainDivElement);
        // this.sendByLetterRoot.removeChild(this.backdropDivElement);
    }


    public axiosDate: {
        axios: (path: string) => AxiosInstance,
        controllerPath: string,
        acceptPath: string,
    } = {} as any;

    public accept = (afterSuccess?: (responseData: any) => void) => {
        const elementErrorCount = this.elementsOfForm.validate();
        if (elementErrorCount) {
            this.elementsOfForm.showThereAreSomeErrorYouCanNot(elementErrorCount);
            return;
        }

        this.saveData(afterSuccess);
    }

    saveData = (afterSuccess?: (responseData: any) => void) => {
        this.elementsOfForm.showWaitingFormSpinner();

        this.elementsOfForm.customPayLoad = { ...this.elementsOfForm.customPayLoad, ...this.getPayLoad() };

        const api = this.axiosDate.axios(this.axiosDate.controllerPath);

        api.post(this.axiosDate.acceptPath, this.elementsOfForm.headPayLoad, this.mainStateManager.tokenInfo.headerOfAxios)
            .then(response => {
                if (response.data.isSuccess) {
                    if (response.data.getProp('isSuccess')) {
                        this.elementsOfForm.closeWaitingFormSpinner();
                        if (afterSuccess) {
                            this.elementsOfForm.showSuccessFullMessageBox(undefined, undefined, undefined, () => afterSuccess(response.data.getProp('data')));
                        } else {
                            this.elementsOfForm.showSuccessFullMessageBox(undefined, undefined, undefined);
                        }
                        this.forceUpdate();
                    } else {
                        this.elementsOfForm.closeWaitingFormSpinner();
                        this.elementsOfForm.showInvalidArgumentMessageBox(response.data.getProp('messageRoot'));
                    }
                } else {
                    this.elementsOfForm.closeWaitingFormSpinner();
                    this.elementsOfForm.showInvalidArgumentMessageBox(response.data.getProp('messageRoot'));
                }
            })
            .catch(e => {
                this.elementsOfForm.closeWaitingFormSpinner();
                this.elementsOfForm.showErrorMessageBox(e);
            });
    }

}