import { h } from "@stencil/core";
/**
 * CheckboxGroup 多选框组组件
 * 用于管理多个 checkbox
 */
export class CheckboxGroup {
    el;
    /**
     * 绑定值
     */
    modelValue = [];
    /**
     * 是否禁用
     * @default false
     */
    disabled = false;
    /**
     * 尺寸
     */
    size = 'default';
    /**
     * 是否显示边框
     * @default false
     */
    border = false;
    /**
     * 最小选中数量
     */
    min;
    /**
     * 最大选中数量
     */
    max;
    /**
     * 值改变事件
     */
    hbChange;
    checkboxes = [];
    componentDidLoad() {
        this.updateCheckboxes();
    }
    handleValueChange() {
        this.updateCheckboxesState();
    }
    handlePropsChange() {
        this.updateCheckboxes();
    }
    updateCheckboxes() {
        const checkboxes = Array.from(this.el.querySelectorAll('hb-checkbox'));
        this.checkboxes = checkboxes;
        checkboxes.forEach((checkbox) => {
            checkbox.disabled = this.disabled || checkbox.disabled;
            checkbox.size = this.size;
            checkbox.border = this.border;
            // 监听checkbox变化
            checkbox.addEventListener('hbChange', this.handleCheckboxChange);
        });
        this.updateCheckboxesState();
    }
    updateCheckboxesState() {
        this.checkboxes.forEach((checkbox) => {
            if (checkbox.value !== undefined) {
                const isChecked = this.modelValue.includes(checkbox.value);
                checkbox.modelValue = isChecked
                    ? [...this.modelValue]
                    : this.modelValue.filter((v) => v !== checkbox.value);
            }
        });
    }
    handleCheckboxChange = (e) => {
        const checkbox = e.target;
        const value = checkbox.value;
        if (value === undefined)
            return;
        let newValue;
        if (this.modelValue.includes(value)) {
            newValue = this.modelValue.filter((v) => v !== value);
            // 取消选中后不能低于最小数量
            if (this.min !== undefined && newValue.length < this.min) {
                return;
            }
        }
        else {
            // 选中后不能超过最大数量
            if (this.max !== undefined && this.modelValue.length >= this.max) {
                return;
            }
            newValue = [...this.modelValue, value];
        }
        this.modelValue = newValue;
        this.hbChange.emit(newValue);
    };
    render() {
        return (h("div", { key: 'bec6679f9d71e61ef19f8c57216be635bed70c7b', class: {
                'hb-checkbox-group': true,
            } }, h("slot", { key: '5e137ca5381a35e9a63b99dbed7f1897117daf47' })));
    }
    static get is() { return "hb-checkbox-group"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["checkbox-group.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["checkbox-group.css"]
        };
    }
    static get properties() {
        return {
            "modelValue": {
                "type": "unknown",
                "mutable": true,
                "complexType": {
                    "original": "(string | number)[]",
                    "resolved": "(string | number)[]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u7ED1\u5B9A\u503C"
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "false"
                        }],
                    "text": "\u662F\u5426\u7981\u7528"
                },
                "getter": false,
                "setter": false,
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'large' | 'default' | 'small'",
                    "resolved": "\"default\" | \"large\" | \"small\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u5C3A\u5BF8"
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false,
                "defaultValue": "'default'"
            },
            "border": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "false"
                        }],
                    "text": "\u662F\u5426\u663E\u793A\u8FB9\u6846"
                },
                "getter": false,
                "setter": false,
                "attribute": "border",
                "reflect": false,
                "defaultValue": "false"
            },
            "min": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u6700\u5C0F\u9009\u4E2D\u6570\u91CF"
                },
                "getter": false,
                "setter": false,
                "attribute": "min",
                "reflect": false
            },
            "max": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u6700\u5927\u9009\u4E2D\u6570\u91CF"
                },
                "getter": false,
                "setter": false,
                "attribute": "max",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "checkboxes": {}
        };
    }
    static get events() {
        return [{
                "method": "hbChange",
                "name": "hbChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u503C\u6539\u53D8\u4E8B\u4EF6"
                },
                "complexType": {
                    "original": "(string | number)[]",
                    "resolved": "(string | number)[]",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "modelValue",
                "methodName": "handleValueChange"
            }, {
                "propName": "disabled",
                "methodName": "handlePropsChange"
            }, {
                "propName": "size",
                "methodName": "handlePropsChange"
            }, {
                "propName": "border",
                "methodName": "handlePropsChange"
            }];
    }
}
//# sourceMappingURL=CheckboxGroup.js.map
