import { Host, h } from "@stencil/core";
import { useTranslation } from "../../utils/utils";
export class CheckboxList {
    itemList = [];
    selected = new Set();
    checkbox;
    toggleAll = () => {
        if (this.selected.size === this.itemList.length) {
            this.selected = new Set();
        }
        else {
            this.selected = new Set(this.itemList.map(i => i.value));
        }
        this.checkbox.emit([...this.selected]);
    };
    toggleItem = (id) => {
        const newSet = new Set(this.selected);
        if (newSet.has(id)) {
            newSet.delete(id);
        }
        else {
            newSet.add(id);
        }
        this.selected = newSet;
        this.checkbox.emit([...this.selected]);
    };
    get allChecked() {
        return this.selected.size === this.itemList.length;
    }
    get isIntermediate() {
        return this.selected.size > 0 && this.selected.size < this.itemList.length;
    }
    componentDidRender() {
        // Handle intermediate (indeterminate) state manually
        // const input = document.querySelector(
        //   'checkbox-list input[type="checkbox"]'
        // ) as HTMLInputElement;
        // if (input) {
        //   input.indeterminate = this.isIntermediate;
        // }
    }
    render() {
        const t = useTranslation();
        return (h(Host, { key: '0dfbd60afa1b48301ba5f894aa3ca44ef9e90285' }, h("div", { key: '37c0f493d2f4eeb103022ee0847b36e2a0db8b9a', class: "text-sm text-surface" }, h("label", { key: 'eda0d4a579d1f2a8f3847881524a0ad7f26907a5', class: "checkbox-list mb-2" }, h("input", { key: '05d38b0b386900e25c7776154d8738e270b9f7b9', type: "checkbox", checked: this.allChecked, indeterminate: this.isIntermediate, onClick: this.toggleAll }), h("span", { key: '37f6acbc11a8a8e7c5be3af8b82363a3a78700a3', class: "checkbox-list-select-all", title: t('select_all') }, t('select_all'))), h("div", { key: '04210b1bb97263eadb9c5d76e81c63cd92b9db59', class: "space-y-2" }, this.itemList.map(item => (h("label", { key: item.value, class: "checkbox-list" }, h("input", { type: "checkbox", checked: this.selected.has(item.value), onClick: () => this.toggleItem(item.value) }), item.iconName && (h("img", { src: `https://zwizai-platform.s3.ap-southeast-1.amazonaws.com/zignal-package/${item.iconName}.png`, alt: "agent avatar", class: "checkbox-list-icon", loading: "lazy" })), item.subIconName && (h("img", { src: `https://zwizai-platform.s3.ap-southeast-1.amazonaws.com/zignal-package/${item.subIconName}.png`, alt: "agent avatar", class: "checkbox-list-icon", loading: "lazy" })), h("span", { class: "checkbox-list-title", title: item.label }, item.label))))))));
    }
    static get is() { return "checkbox-list"; }
    static get originalStyleUrls() {
        return {
            "$": ["checkbox-list.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["checkbox-list.css"]
        };
    }
    static get properties() {
        return {
            "itemList": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "MenuListItem[]",
                    "resolved": "MenuListItem[]",
                    "references": {
                        "MenuListItem": {
                            "location": "import",
                            "path": "../../store/type",
                            "id": "src/store/type.ts::MenuListItem",
                            "referenceLocation": "MenuListItem"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "selected": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Set<string>",
                    "resolved": "Set<string>",
                    "references": {
                        "Set": {
                            "location": "global",
                            "id": "global::Set"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "new Set()"
            }
        };
    }
    static get events() {
        return [{
                "method": "checkbox",
                "name": "checkbox",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "string[]",
                    "resolved": "string[]",
                    "references": {}
                }
            }];
    }
}
