/*!
 * Built by ShiftSoftware
 * Copyright (c)
 */
import { h, Host, forceUpdate } from "@stencil/core";
import cn from "../../global/lib/cn";
const formStepperId = 'form-stepper-line';
export class FormStepper {
    constructor() {
        this.updateLine = () => {
            var _a;
            const [locale] = this.form.getFormLocale();
            const direction = (_a = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _a === void 0 ? void 0 : _a.direction;
            if (!this.container || !this.line || !direction)
                return;
            const buttons = this.container.querySelectorAll('button');
            if (buttons.length < 2)
                return;
            const firstButton = buttons[0].getBoundingClientRect();
            const lastButton = buttons[buttons.length - 1].getBoundingClientRect();
            const firstCenter = firstButton.left + firstButton.width / 2;
            const lastCenter = lastButton.left + lastButton.width / 2;
            const width = Math.abs(lastCenter - firstCenter);
            this.line.style.width = `${width}px`;
        };
    }
    componentDidLoad() {
        this.form.subscribe(formStepperId, this);
        this.updateLine();
        this.resizeObserver = new ResizeObserver(() => {
            this.updateLine();
        });
        this.resizeObserver.observe(this.container);
    }
    async disconnectedCallback() {
        this.form.unsubscribe(formStepperId);
        if (this.resizeObserver) {
            this.resizeObserver.disconnect();
        }
    }
    async onLanguageUpdate() {
        forceUpdate(this);
        this.line.style.width = `${0}px`;
        setTimeout(() => this.updateLine(), 100);
    }
    render() {
        var _a, _b, _c, _d, _e;
        const [_, language] = this.form.getFormLocale();
        const steps = ((_c = (_b = (_a = this === null || this === void 0 ? void 0 : this.form) === null || _a === void 0 ? void 0 : _a.context) === null || _b === void 0 ? void 0 : _b.structure) === null || _c === void 0 ? void 0 : _c.steps) || [];
        const currentStep = (_e = (_d = this.form) === null || _d === void 0 ? void 0 : _d.formStructure) === null || _e === void 0 ? void 0 : _e.currentStep;
        return (h(Host, { key: 'a14bb2c569f133b42f9acfcf4a5895ea4116c85f', translate: "no" }, h("div", { key: '7ba58c2d42a1a513629da85d76d0b812eec3ba19', part: cn(formStepperId, this === null || this === void 0 ? void 0 : this.name), class: "w-full", id: this.wrapperId }, h("div", { key: '2e9bf3f2e93e70c45afada5dd97e531c5c537b35', part: cn(formStepperId + 'container', (this === null || this === void 0 ? void 0 : this.name) + 'container'), ref: el => (this.container = el), class: "relative flex items-center justify-between px-1 w-full" }, h("div", { key: 'c4f8cb90209eb6d257316faa554807dc8a453740', part: cn(formStepperId + '-line'), ref: el => (this.line = el), class: "absolute w-full h-[1px] -translate-y-[50%] -translate-x-[50%] top-[16px] left-[50%]", style: { background: 'repeating-linear-gradient(to right,black 0px,black 12px,transparent 6px,transparent 24px)' } }), steps.map((step, i) => {
            var _a, _b, _c;
            return (h("div", { key: i, class: "flex items-center" }, h("div", { part: cn(formStepperId + '-step', formStepperId + '-step-' + (i + 1), {
                    [formStepperId + '-step-done']: i + 1 < currentStep,
                    [formStepperId + '-step-done' + (i + 1)]: i + 1 < currentStep,
                    [formStepperId + '-step-active']: i + 1 === currentStep,
                    [formStepperId + '-step-active' + (i + 1)]: i + 1 === currentStep,
                }), class: "flex flex-col items-center" }, h("button", { type: "button", "aria-expanded": (_a = (i + 1 === currentStep)) === null || _a === void 0 ? void 0 : _a.toString(), part: cn(formStepperId + '-step-indicator', formStepperId + '-step-indicator-' + (i + 1), {
                    [formStepperId + '-step-indicator-done']: i + 1 < currentStep,
                    [formStepperId + '-step-indicator-done' + (i + 1)]: i + 1 < currentStep,
                    [formStepperId + '-step-indicator-active']: i + 1 === currentStep,
                    [formStepperId + '-step-indicator-active' + (i + 1)]: i + 1 === currentStep,
                }), class: "relative z-[10] before:absolute before:inset-0 before:size-full before:origin-center before:bg-black/15 before:transition-all before:duration-500 aria-expanded:before:scale-[1.5] size-[32px] flex bg-black cursor-default items-center justify-center" }, h("div", { class: "relative z-10 text-white items-center text-[16px]", part: cn(formStepperId + '-step-indicator-text', formStepperId + '-step-indicator-text-' + (i + 1), {
                    [formStepperId + '-step-indicator-text-done']: i + 1 < currentStep,
                    [formStepperId + '-step-indicator-text-done' + (i + 1)]: i + 1 < currentStep,
                    [formStepperId + '-step-indicator-text-active']: i + 1 === currentStep,
                    [formStepperId + '-step-indicator-text-active' + (i + 1)]: i + 1 === currentStep,
                }) }, (_b = step === null || step === void 0 ? void 0 : step[language]) === null || _b === void 0 ? void 0 : _b.stepCell)), h("span", { part: cn(formStepperId + '-step-title', formStepperId + '-step-title-' + (i + 1), {
                    [formStepperId + '-step-title-done']: i + 1 < currentStep,
                    [formStepperId + '-step-title-done' + (i + 1)]: i + 1 < currentStep,
                    [formStepperId + '-step-title-active']: i + 1 === currentStep,
                    [formStepperId + '-step-title-active' + (i + 1)]: i + 1 === currentStep,
                }), class: "text-[14px] text-center mt-[12px] text-gray-600" }, (_c = step === null || step === void 0 ? void 0 : step[language]) === null || _c === void 0 ? void 0 : _c.stepTitle))));
        })))));
    }
    static get is() { return "form-stepper"; }
    static get originalStyleUrls() {
        return {
            "$": ["form-inputs.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["form-inputs.css"]
        };
    }
    static get properties() {
        return {
            "name": {
                "type": "string",
                "attribute": "name",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "language": {
                "type": "string",
                "attribute": "language",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "wrapperId": {
                "type": "string",
                "attribute": "wrapper-id",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": 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": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "wrapperClass": {
                "type": "string",
                "attribute": "wrapper-class",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            }
        };
    }
    static get watchers() {
        return [{
                "propName": "language",
                "methodName": "onLanguageUpdate"
            }];
    }
}
