import { OptionBase, Popup, createElement, showAlert } from "../ui";
import AssetSelector from "./assetselector";
import TemplateSelector from "./templateselector";

export default class InspectionWizard extends OptionBase {
    _var = {
        /**
         * @private
         * @type {number}
         */
        index: 0,
        /**
         * @private
         * @type {HTMLElement[]}
         */
        containers: [],
        /**
         * @private
         * @type {AssetSelector}
         */
        assetSelector: null,
        asset: null,
        template: null,
        /**
         * @private
         * @type {Popup}
         */
        popup: null
    };

    /**
     * @event
     * @type {(this: InspectionWizard, asset: any, template: any) => void}
     */
    onSelected;

    constructor(opt = {
        /**
         * @private
         * @type {(assetId: number, search: string) => Promise<any[]>}
         */
        requestTemplates: null,
        /**
         * @private
         * @type {(hidden: boolean, search?: string, groups?: string[], jobsites?: number[], codes?: string[]) => Promise<any[]>}
         */
        requestAssets: null,
        /**
         * @private
         * @type {() => Promise<{AssetGroups: any[], Codes: any[], Jobsites: any[]}>}
         */
        requestAssetParams: null
    }) {
        super(opt);
    }

    async create() {
        const option = this._option;
        const loading = flag => this._var.popup.loading = flag;
        const assetSelector = new AssetSelector({
            ignoreHidden: true,
            loading,
            requestAssets: option.requestAssets,
            requestAssetParams: option.requestAssetParams
        });
        this._var.assetSelector = assetSelector;
        const templateSelector = new TemplateSelector({
            loading,
            requestTemplates: option.requestTemplates
        });
        assetSelector.onSelected = asset => {
            this._var.asset = asset;
            this._var.template = null;
            this._changePage(1);
            templateSelector.assetId = asset.Id;
        };
        templateSelector.onSelected = template => {
            this._var.template = template;
            this._select();
            this._var.popup.close();
        }
        this._var.containers = [
            assetSelector.create(),
            templateSelector.create()
        ];
        const popup = new Popup({
            title: this.r('ADDINSPECTION', 'Add Inspection'),
            content: createElement('div', null, ...this._var.containers),
            persistent: true,
            buttons: [
                {
                    text: this.r('BACK', 'Back'),
                    trigger: () => {
                        this._changePage(0);
                        return false;
                    }
                },
                {
                    text: this.r('NEXT', 'Next'),
                    trigger: () => {
                        const asset = assetSelector.currentAsset;
                        if (asset == null) {
                            showAlert(assetSelector.title, this.r('P_SELECTASSETS_SELECTASSET', 'Please select an Asset.'));
                            return false;
                        }
                        this._var.asset = asset;
                        this._var.template = null;
                        this._changePage(1);
                        templateSelector.assetId = asset.Id;
                        return false;
                    }
                },
                {
                    text: this.r('P_GRID_OK', 'OK'),
                    trigger: () => {
                        const template = templateSelector.currentTemplate;
                        if (template == null) {
                            showAlert(templateSelector.title, this.r('P_WO_PLEASESELECTATEMPLATE', 'Please select a template.'));
                            return false;
                        }
                        this._var.template = template;
                        this._select();
                    }
                },
                { text: this.r('P_WO_CANCEL', 'Cancel') }
            ]
        });
        this._var.popup = popup;
        popup.create();
        this._changePage(0);
        popup.rect = { width: 1220 };
        const mask = await popup.show();
        assetSelector.init();
        return mask;
    }

    show() {
        if (this._var.popup == null) {
            return this.create();
        }
        this._changePage(0);
        const selector = this._var.assetSelector;
        selector._var.el.inputSearch.value = '';
        selector._var.el.dropAssetGroup.select('-1');
        selector._var.el.dropJobsite.select('-1');
        selector._var.el.dropJobsiteCode.select('-1');
        selector.refresh();
        return this._var.popup.show();
    }

    _select() {
        if (typeof this.onSelected === 'function') {
            this.onSelected(this._var.asset, this._var.template);
        }
    }

    _changePage(index) {
        if (isNaN(index) || index < 0 || index >= 2) {
            return;
        }
        this._var.index = index;
        this._var.containers[0].style.display = index === 0 ? '' : 'none';
        this._var.containers[1].style.display = index === 1 ? '' : 'none';
        const footerButtons = this._var.popup.container.querySelectorAll('.ui-popup-footer>.ui-popup-button');
        footerButtons[0].style.display = index === 0 ? 'none' : '';
        footerButtons[1].style.display = index === 1 ? 'none' : '';
        footerButtons[2].style.display = index === 0 ? 'none' : '';
    }
}