import { h, Host } from "@stencil/core";
import { FORM_INPUTS } from '../../models/form-input';
export class BceForm {
    constructor() {
        this.errors = [];
        this._inputs = [];
        this.handleClick = (event) => {
            const target = event.target;
            if (!target)
                return;
            if (target.type === 'submit')
                this.submit();
            else if (target.type === 'reset')
                this.reset();
        };
        this.handleSlotChange = (event) => {
            const slot = 'target' in event ? event.target : event;
            if (!slot || slot.tagName !== 'SLOT')
                return;
            const query = FORM_INPUTS.join(',');
            const element = this.findParentDialog() || this.el;
            this._inputs = Array.from(element.querySelectorAll(query));
        };
    }
    async reset() {
        const tasks = this._inputs.map(el => el.reset());
        await Promise.all(tasks);
    }
    async submit() {
        const errors = await this.validate();
        const type = !errors.length ? 'submit' : 'error';
        const event = new Event(type, { bubbles: true, composed: true });
        this.el.dispatchEvent(event);
    }
    async validate(silent = false) {
        const tasks = this._inputs.map(el => el.validate(silent));
        this.errors = [].concat(...(await Promise.all(tasks)));
        return this.errors;
    }
    findParentDialog() {
        if (!this.el.parentNode || !('host' in this.el.parentNode))
            return undefined;
        const parent = this.el.parentNode.host;
        return parent.nodeName === 'BCE-DIALOG' ? parent : undefined;
    }
    componentDidLoad() {
        const slot = this.el.shadowRoot.querySelector('slot');
        if (slot) {
            slot.addEventListener('slotchange', this.handleSlotChange);
            this.handleSlotChange(slot);
        }
    }
    render() {
        return (h(Host, { onClick: this.handleClick },
            h("slot", null)));
    }
    static get is() { return "bce-form"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["bce-form.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["bce-form.css"]
    }; }
    static get properties() { return {
        "design": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'card'",
                "resolved": "\"card\"",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "design",
            "reflect": true
        },
        "errors": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "Validation[]",
                "resolved": "Validation[]",
                "references": {
                    "Validation": {
                        "location": "import",
                        "path": "../../models/validation"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "defaultValue": "[]"
        }
    }; }
    static get methods() { return {
        "reset": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "submit": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "validate": {
            "complexType": {
                "signature": "(silent?: boolean) => Promise<Validation[]>",
                "parameters": [{
                        "tags": [],
                        "text": ""
                    }],
                "references": {
                    "Promise": {
                        "location": "global"
                    },
                    "Validation": {
                        "location": "import",
                        "path": "../../models/validation"
                    }
                },
                "return": "Promise<Validation[]>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "el"; }
}
