import { Host, h } from "@stencil/core";
import { Errors } from "../../services/errors";
import { bracketToDot } from "../../utils/helpers";
import { Lang } from "../../services/lang";
export class XInputError {
    constructor() {
        this.errorsFor = undefined;
        this.errors = [];
    }
    /**
     * Get the event object and parse to validation messages
     *
     * @param ev
     * @returns
     */
    parseValidationEvent(ev) {
        if ((ev === null || ev === void 0 ? void 0 : ev.detail) === null) {
            return [];
        }
        const input = ev.detail;
        const validity = input.validity;
        const errors = [];
        if (validity.valid) {
            return errors;
        }
        if (validity.badInput) {
            errors.push(Lang.get('fields.validation.bad-input'));
        }
        if (validity.customError) {
            errors.push(input.validationMessage);
        }
        if (validity.patternMismatch) {
            errors.push(Lang.get('fields.validation.pattern-mismatch'));
        }
        if (validity.rangeOverflow) {
            errors.push(Lang.get('fields.validation.range-overflow'));
        }
        if (validity.rangeUnderflow) {
            errors.push(Lang.get('fields.validation.range-underflow', { min: input.getAttribute('min') }));
        }
        if (validity.stepMismatch) {
            errors.push(Lang.get('fields.validation.step-mismatch', { max: input.getAttribute('max') }));
        }
        if (validity.tooLong) {
            errors.push(Lang.get('fields.validation.too-long', { max: input.getAttribute('maxlength') }));
        }
        if (validity.tooShort) {
            errors.push(Lang.get('fields.validation.too-short', { min: input.getAttribute('minlength') }));
        }
        if (validity.typeMismatch) {
            errors.push(Lang.get('fields.validation.type-mismatch'));
        }
        if (validity.valueMissing) {
            errors.push(Lang.get('fields.validation.value-missing'));
        }
        return errors;
    }
    /**
     * On validate the selected input
     */
    onValidateInput(ev) {
        this.errors = this.parseValidationEvent(ev);
    }
    /**
     * On errors added associated to input
     */
    onErrorAddedToInput() {
        this.errors = Errors.get(bracketToDot(this.errorsFor));
    }
    /**
     * On element is mounted
     */
    componentDidLoad() {
        if (this.errorsFor.length == 0) {
            return;
        }
        const form = this.internals.form;
        this.inputs = form.querySelectorAll(`[name="${this.errorsFor}"], [data-for="${this.errorsFor}"]`);
        this.inputs.length > 0 && this.inputs.forEach((input) => {
            input.validate = true;
            input.addEventListener('validated', this.onValidateInput.bind(this));
        });
        document.addEventListener('errorsAdded', this.onErrorAddedToInput.bind(this));
    }
    /**
     * On element is destroyed
     */
    disconnectedCallback() {
        this.inputs.length > 0 && this.inputs.forEach((input) => {
            input.removeEventListener('validated', this.onValidateInput);
        });
        document.removeEventListener('errorsAdded', this.onErrorAddedToInput);
    }
    /**
     * Render component
     */
    render() {
        return (h(Host, { key: 'ab73f72667603546e4adf3334c2b19c4cfda7a12' }, h("slot", { key: '65132f356846d03f16d8f8c9536c656174ba2aad' }), this.errors.map((error, i) => (h("p", { key: `${bracketToDot(this.errorsFor)}-${i}` }, error)))));
    }
    static get is() { return "x-input-error"; }
    static get formAssociated() { return true; }
    static get originalStyleUrls() {
        return {
            "$": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["style.css"]
        };
    }
    static get properties() {
        return {
            "errorsFor": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Input errors for mapping to element"
                },
                "attribute": "errors-for",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "errors": {}
        };
    }
    static get elementRef() { return "el"; }
    static get attachInternalsMemberName() { return "internals"; }
}
