/*!
 * KoliBri - The accessible HTML-Standard
 */
import { h, Host } from "@stencil/core";
import { validateErrorList, watchBoolean, watchString } from "../../schema";
import { translate } from "../../i18n";
import { KolLinkWcTag } from "../../core/component-names";
import KolAlertFc from "../../functional-components/Alert";
import { dispatchDomEvent, KolEvent } from "../../utils/events";
export class KolForm {
    constructor() {
        this.translateErrorListMessage = translate('kol-error-list-message');
        this.translateErrorList = translate('kol-error-list');
        this.translateFormDescription = translate('kol-form-description');
        this.onSubmit = (event) => {
            var _a, _b;
            event.preventDefault();
            if (typeof ((_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onSubmit) === 'function') {
                (_b = this.state._on) === null || _b === void 0 ? void 0 : _b.onSubmit(event);
            }
            if (this.host) {
                dispatchDomEvent(this.host, KolEvent.submit);
            }
        };
        this.onReset = (event) => {
            var _a, _b;
            event.preventDefault();
            if (typeof ((_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onReset) === 'function') {
                (_b = this.state._on) === null || _b === void 0 ? void 0 : _b.onReset(event);
            }
            if (this.host) {
                dispatchDomEvent(this.host, KolEvent.reset);
            }
        };
        this.handleLinkClick = (selector) => {
            const targetElement = document.querySelector(selector);
            if (targetElement && typeof targetElement.focus === 'function') {
                targetElement.scrollIntoView({ behavior: 'smooth' });
                targetElement.focus();
            }
        };
        this.setBlockElement = (el) => (this.errorListBlock = el);
        this.setFirstLinkElement = (el) => (this.errorListFirstLink = el);
        this._requiredText = true;
        this.state = {};
    }
    renderErrorList(errorList) {
        return (h(KolAlertFc, { class: "kol-form__alert", ref: this.setBlockElement, type: "error", variant: "card", label: this.translateErrorListMessage }, h("nav", { "aria-label": this.translateErrorList }, h("ul", null, errorList === null || errorList === void 0 ? void 0 : errorList.map((error, index) => (h("li", { key: index }, h(KolLinkWcTag, { class: "kol-form__link", _href: "", _label: error.message, _on: { onClick: typeof error.selector === 'string' ? () => this.handleLinkClick(String(error.selector)) : error.selector }, ref: index === 0 ? this.setFirstLinkElement : undefined }))))))));
    }
    renderFormElement() {
        return (h("form", { class: "kol-form", method: "post", onSubmit: this.onSubmit, onReset: this.onReset, noValidate: true }, this.state._requiredText === true ? (h("p", null, h("div", { class: "kol-form__mandatory-fields-hint" }, this.translateFormDescription))) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (h("p", null, h("div", { class: "kol-form__mandatory-fields-hint" }, this.state._requiredText))) : null, h("slot", null)));
    }
    render() {
        const hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;
        return (h(Host, { key: 'd002ea1e6be732b787b8e9823fb7812dd43abbc7' }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
    }
    scrollToErrorList() {
        var _a;
        (_a = this.errorListBlock) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
            behavior: 'smooth',
            block: 'start',
        });
        setTimeout(() => {
            var _a, _b;
            (_b = (_a = this.errorListFirstLink) === null || _a === void 0 ? void 0 : _a.querySelector('a')) === null || _b === void 0 ? void 0 : _b.focus();
        }, 250);
    }
    async focusErrorList() {
        this.scrollToErrorList();
        return Promise.resolve();
    }
    validateOn(value) {
        if (typeof value === 'object' && value !== null) {
            this.state = Object.assign(Object.assign({}, this.state), { _on: value });
        }
    }
    validateRequiredText(value) {
        if (typeof value === 'boolean') {
            watchBoolean(this, '_requiredText', value);
        }
        else {
            watchString(this, '_requiredText', value);
        }
    }
    validateErrorList(value) {
        validateErrorList(this, value);
    }
    componentWillLoad() {
        this.validateOn(this._on);
        this.validateRequiredText(this._requiredText);
        this.validateErrorList(this._errorList);
    }
    static get is() { return "kol-form"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "default": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "default": ["style.css"]
        };
    }
    static get properties() {
        return {
            "_on": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "KoliBriFormCallbacks",
                    "resolved": "undefined | { onSubmit?: EventCallback<Event> | undefined; onReset?: EventCallback<Event> | undefined; }",
                    "references": {
                        "KoliBriFormCallbacks": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::KoliBriFormCallbacks"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Gibt die EventCallback-Funktionen f\u00FCr die Form-Events an."
                },
                "getter": false,
                "setter": false
            },
            "_requiredText": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "Stringified<boolean>",
                    "resolved": "boolean | string | undefined",
                    "references": {
                        "Stringified": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::Stringified"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines whether the mandatory-fields-hint should be shown. A string overrides the default text."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_required-text",
                "defaultValue": "true"
            },
            "_errorList": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "ErrorListPropType[]",
                    "resolved": "ErrorListPropType[] | undefined",
                    "references": {
                        "ErrorListPropType": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::ErrorListPropType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "A list of error objects that each describe an issue encountered in the form.\nEach error object contains a message and a selector for identifying the form element related to the error."
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get states() {
        return {
            "state": {}
        };
    }
    static get methods() {
        return {
            "focusErrorList": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Scrolls to the error list and focuses the first link.",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "_on",
                "methodName": "validateOn"
            }, {
                "propName": "_requiredText",
                "methodName": "validateRequiredText"
            }, {
                "propName": "_errorList",
                "methodName": "validateErrorList"
            }];
    }
}
//# sourceMappingURL=shadow.js.map
