/*!
 * Built by ShiftSoftware
 * Copyright (c)
 */
import { Host, h } from "@stencil/core";
import generalSchema from "../../locales/general/type";
import { getLocaleLanguage, getSharedLocal, sharedLocalesSchema } from "../../features/multi-lingual/index";
import { renderStructure } from "../../features/form-hook/index";
import cn from "../../global/lib/cn";
import getCustomClassesForPortal from "../../global/lib/get-custom-classes-for-portal";
export class FormStructure {
    constructor() {
        // #region Localization
        this.formLocale = {};
        this.language = 'en';
        this.locale = Object.assign({ sharedLocales: sharedLocalesSchema.getDefault() }, generalSchema.getDefault());
        this.isLoading = false;
        this.errorMessage = '';
        this.successMessage = '';
        this.fields = {};
        this.currentStep = 1;
        this.dialogClasses = '';
    }
    async componentWillLoad() {
        this.form.formStructure = this;
        await this.changeLanguage(this.language);
    }
    async changeLanguage(newLanguage) {
        const [sharedLocales, locale] = await Promise.all([getSharedLocal(newLanguage), getLocaleLanguage(newLanguage, 'general', generalSchema)]);
        this.locale = Object.assign({ sharedLocales }, locale);
    }
    async componentDidLoad() {
        this.dialogClasses = getCustomClassesForPortal(this.el);
        setTimeout(() => {
            var _a;
            if (typeof ((_a = this.form.context) === null || _a === void 0 ? void 0 : _a.structureRendered) === 'boolean')
                this.form.context.structureRendered = true;
        }, 300);
    }
    render() {
        var _a, _b, _c, _d, _e, _f;
        const [locale] = this.form.getFormLocale();
        const generalProps = {
            form: this.form,
            isLoading: this.isLoading,
            language: this.language,
            locale: this.formLocale,
            props: { isLoading: this.isLoading, form: this.form },
        };
        if (!this.structure)
            return h("form-structure-error", { language: this.language });
        const { formController, resetFormErrorMessage } = this.form;
        const dialogParams = {
            form: this.form,
            message: this.errorMessage,
            isError: !!this.errorMessage,
            dialogClosed: resetFormErrorMessage,
            successMessage: this.successMessage,
            closeText: (_a = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _a === void 0 ? void 0 : _a.close,
        };
        return (h(Host, { translate: "no" }, h("form", Object.assign({ id: this.formId, class: "relative", dir: (_c = (_b = this === null || this === void 0 ? void 0 : this.locale) === null || _b === void 0 ? void 0 : _b.sharedLocales) === null || _c === void 0 ? void 0 : _c.direction }, formController), h("div", { class: "fixed top-10 left-10 size-20 overflow-hidden translate-x-5 translate-y-7" }, 
        // @ts-ignore
        false && h("form-dialog", null), h("shift-portal", { tag: "form-dialog", inheritedClasses: this.dialogClasses, componentProps: dialogParams })), h("div", { part: "form-structure-form-container" }, !((_d = this === null || this === void 0 ? void 0 : this.structure) === null || _d === void 0 ? void 0 : _d.steps) && renderStructure(this.structure, this.formElementMapper, generalProps, this.fields, -2), !!((_e = this === null || this === void 0 ? void 0 : this.structure) === null || _e === void 0 ? void 0 : _e.steps) && (h("div", { part: "form-stepper-container", class: "overflow-hidden" }, renderStructure(this.structure, this.formElementMapper, generalProps, this.fields, -1), h("div", { class: "grid grid-cols-1 grid-rows-1" }, (_f = this === null || this === void 0 ? void 0 : this.structure) === null || _f === void 0 ? void 0 : _f.steps.map((_, i) => (h("div", { class: cn('col-start-1 row-start-1 transition-all !duration-700', {
                'pointer-events-none! *:pointer-events-none!': this.currentStep !== i + 1,
                'translate-x-full rtl:-translate-x-full opacity-0': this.currentStep < i + 1,
                'translate-x-0 opacity-100': this.currentStep === i + 1,
                '-translate-x-full rtl:translate-x-full  opacity-0': this.currentStep > i + 1,
            }) }, renderStructure(this.structure, this.formElementMapper, generalProps, this.fields, i + 1)))))))), h("button", { formnovalidate: true, type: "submit", class: "hidden" }))));
    }
    static get is() { return "form-structure"; }
    static get originalStyleUrls() {
        return {
            "$": ["form-inputs.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["form-inputs.css"]
        };
    }
    static get properties() {
        return {
            "formLocale": {
                "type": "any",
                "attribute": "form-locale",
                "mutable": false,
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "{}"
            },
            "language": {
                "type": "string",
                "attribute": "language",
                "mutable": false,
                "complexType": {
                    "original": "LanguageKeys",
                    "resolved": "\"ar\" | \"en\" | \"ku\" | \"ru\"",
                    "references": {
                        "LanguageKeys": {
                            "location": "import",
                            "path": "~features/multi-lingual",
                            "id": "src/features/multi-lingual/index.ts::LanguageKeys"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "'en'"
            },
            "formId": {
                "type": "string",
                "attribute": "form-id",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "isLoading": {
                "type": "boolean",
                "attribute": "is-loading",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "form": {
                "type": "unknown",
                "attribute": "form",
                "mutable": false,
                "complexType": {
                    "original": "FormHook<any>",
                    "resolved": "FormHook<any>",
                    "references": {
                        "FormHook": {
                            "location": "import",
                            "path": "~features/form-hook",
                            "id": "src/features/form-hook/index.ts::FormHook"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "errorMessage": {
                "type": "string",
                "attribute": "error-message",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "''"
            },
            "successMessage": {
                "type": "string",
                "attribute": "success-message",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "''"
            },
            "fields": {
                "type": "unknown",
                "attribute": "fields",
                "mutable": true,
                "complexType": {
                    "original": "object",
                    "resolved": "object",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "{}"
            },
            "structure": {
                "type": "unknown",
                "attribute": "structure",
                "mutable": false,
                "complexType": {
                    "original": "FormElementStructure<any>",
                    "resolved": "{ steps?: Record<LanguageKeys, Step>[]; data?: Record<string, any>; requiredContext?: Record<string, boolean>; } & { id?: string; step?: number; type?: string; class?: string; staticValue?: any; isHidden?: boolean; isDisabled?: boolean; children?: any[]; } & { tag: string; name?: any; } | { steps?: Record<LanguageKeys, Step>[]; data?: Record<string, any>; requiredContext?: Record<string, boolean>; } & { id?: string; step?: number; type?: string; class?: string; staticValue?: any; isHidden?: boolean; isDisabled?: boolean; children?: any[]; } & { tag?: string; name: any; }",
                    "references": {
                        "FormElementStructure": {
                            "location": "import",
                            "path": "~features/form-hook",
                            "id": "src/features/form-hook/index.ts::FormElementStructure"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "formElementMapper": {
                "type": "unknown",
                "attribute": "form-element-mapper",
                "mutable": false,
                "complexType": {
                    "original": "FormElementMapper<any, any>",
                    "resolved": "{ [x: string]: FormElementMapperFunction<any>; } & { [x: string]: FormElementMapperFunction<any>; }",
                    "references": {
                        "FormElementMapper": {
                            "location": "import",
                            "path": "~features/form-hook",
                            "id": "src/features/form-hook/index.ts::FormElementMapper"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get states() {
        return {
            "locale": {},
            "currentStep": {},
            "dialogClasses": {}
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "language",
                "methodName": "changeLanguage"
            }];
    }
}
