import { h, Host } from "@stencil/core";
import { FormCheckboxGroupClass, FormGroupClass, FormGroupOrientation, FormGroupSizes } from "./constants";
import { govHost } from "../../../helpers/Dom/template";
import { validateProp } from "../../../helpers/Validate/props";
import { tick } from "../../../utils/stencil.utils";
import { propsValueToArray } from "../../../utils/array.utils";
export class GovFormCheckboxGroup {
    constructor() {
        /**
         * Gap's size.
         */
        this.gap = undefined;
        /**
         * Elements orientation
         */
        this.orientation = 'vertical';
        /**
         * Group's value
         */
        this.value = undefined;
        this.handleChange = (event) => {
            var _a;
            event.stopPropagation();
            const value = propsValueToArray(this.value);
            if (!Array.isArray(value))
                return;
            if (event.detail.checked) {
                this.value = [...value, event.detail.value];
            }
            else {
                this.value = (_a = value.filter((val) => val !== event.detail.value)) !== null && _a !== void 0 ? _a : [];
            }
            this.govChange.emit({
                value: this.value,
                component: FormCheckboxGroupClass.root,
            });
        };
        this.h = govHost(this.host);
    }
    validateGap(newValue) {
        if (newValue) {
            validateProp(FormGroupSizes, newValue, FormGroupClass.root);
        }
    }
    validateOrientation(newValue) {
        if (newValue) {
            validateProp(FormGroupOrientation, newValue, FormGroupClass.root);
        }
    }
    componentWillLoad() {
        this.validateGap(this.gap);
        this.validateOrientation(this.orientation);
        this.value = propsValueToArray(this.value);
    }
    componentDidRender() {
        tick(() => this.rerenderComponent());
    }
    rerenderComponent() {
        this.host.querySelectorAll('gov-form-checkbox').forEach((element) => {
            if (!element.hasAttribute('listener-attached')) {
                element.addEventListener('gov-change', this.handleChange);
            }
            element.setAttribute('listener-attached', 'true');
            element.checked = this.value.includes(element.value);
        });
    }
    render() {
        return (h(Host, { key: 'cfff4a643c778c0a573b08e6310045b8f0f0764b', gap: this.gap, class: this.h.classes(FormGroupClass.root), value: this.value }, h("slot", { key: '6c9f6c553525f61c3aa95c834fd495d4dd6a8346' })));
    }
    static get is() { return "gov-form-checkbox-group"; }
    static get originalStyleUrls() {
        return {
            "$": ["gov-form-group.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["gov-form-group.css"]
        };
    }
    static get properties() {
        return {
            "gap": {
                "type": "string",
                "attribute": "gap",
                "mutable": false,
                "complexType": {
                    "original": "FormGroupSizesType",
                    "resolved": "\"2xl\" | \"l\" | \"m\" | \"s\" | \"xs\"",
                    "references": {
                        "FormGroupSizesType": {
                            "location": "import",
                            "path": "./constants",
                            "id": "../../../packages/core/src/components/gov-form/group/constants.ts::FormGroupSizesType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Gap's size."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "undefined"
            },
            "orientation": {
                "type": "string",
                "attribute": "orientation",
                "mutable": false,
                "complexType": {
                    "original": "FormGroupOrientationType",
                    "resolved": "\"horizontal\" | \"vertical\"",
                    "references": {
                        "FormGroupOrientationType": {
                            "location": "import",
                            "path": "./constants",
                            "id": "../../../packages/core/src/components/gov-form/group/constants.ts::FormGroupOrientationType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Elements orientation"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'vertical'"
            },
            "value": {
                "type": "string",
                "attribute": "value",
                "mutable": true,
                "complexType": {
                    "original": "string | string[]",
                    "resolved": "string | string[]",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Group's value"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "undefined"
            }
        };
    }
    static get events() {
        return [{
                "method": "govChange",
                "name": "gov-change",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "/* Emitted when the checkbox change value."
                },
                "complexType": {
                    "original": "FormCheckboxGroupEvent",
                    "resolved": "FormCheckboxGroupEvent",
                    "references": {
                        "FormCheckboxGroupEvent": {
                            "location": "import",
                            "path": "./gov-form-group.types",
                            "id": "../../../packages/core/src/components/gov-form/group/gov-form-group.types.ts::FormCheckboxGroupEvent"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "gap",
                "methodName": "validateGap"
            }, {
                "propName": "orientation",
                "methodName": "validateOrientation"
            }];
    }
}
//# sourceMappingURL=gov-form-checkbox-group.js.map
