import { h } from "@stencil/core";
/**
 * Transfer 穿梭框组件
 * 双栏列表选择，勾选项后通过中间按钮在两栏间移动
 */
export class Transfer {
    /**
     * 数据源
     */
    data = [];
    /**
     * 右侧（目标列表）的 keys
     */
    targetKeys = [];
    /**
     * 两侧已勾选的 keys
     */
    selectedKeys = [];
    /**
     * 标题，[源列表标题, 目标列表标题]
     * @default ['源列表', '目标列表']
     */
    titles = ['源列表', '目标列表'];
    /**
     * 是否禁用
     * @default false
     */
    disabled = false;
    /**
     * 是否显示搜索框
     * @default false
     */
    filterable = false;
    /**
     * 右侧列表变化事件
     */
    hbChange;
    leftFilter = '';
    rightFilter = '';
    handleSelectedKeysChange() {
        /* 触发重渲染 */
    }
    /** 左侧列表：key 不在 targetKeys 中 */
    get leftList() {
        return this.data.filter((item) => !this.targetKeys.includes(item.key));
    }
    /** 右侧列表：key 在 targetKeys 中 */
    get rightList() {
        const targetSet = new Set(this.targetKeys);
        return this.data.filter((item) => targetSet.has(item.key));
    }
    /** 当前列表项是否被勾选 */
    isSelected(key) {
        return this.selectedKeys.includes(key);
    }
    /** 切换某项的勾选状态 */
    toggleItem = (item) => {
        if (this.disabled || item.disabled)
            return;
        const isSelected = this.isSelected(item.key);
        this.selectedKeys = isSelected
            ? this.selectedKeys.filter((k) => k !== item.key)
            : [...this.selectedKeys, item.key];
    };
    /** 获取某侧可勾选（非 disabled）的全部 keys */
    getSelectableKeys(list) {
        return list.filter((item) => !item.disabled).map((item) => item.key);
    }
    /** 计算某侧全选 checkbox 状态：'all' | 'none' | 'indeterminate' */
    getCheckAllState(list) {
        const selectableKeys = this.getSelectableKeys(list);
        if (selectableKeys.length === 0)
            return 'none';
        const selectedCount = selectableKeys.filter((k) => this.isSelected(k)).length;
        if (selectedCount === 0)
            return 'none';
        if (selectedCount === selectableKeys.length)
            return 'all';
        return 'indeterminate';
    }
    /** 切换某侧全选 */
    toggleCheckAll = (list) => {
        if (this.disabled)
            return;
        const selectableKeys = this.getSelectableKeys(list);
        const state = this.getCheckAllState(list);
        if (state === 'all') {
            // 取消该侧全部勾选
            this.selectedKeys = this.selectedKeys.filter((k) => !selectableKeys.includes(k));
        }
        else {
            // 勾选该侧全部（合并去重）
            const merged = new Set([...this.selectedKeys, ...selectableKeys]);
            this.selectedKeys = Array.from(merged);
        }
    };
    /** 向右移动：把左侧已勾选的项移到右侧 */
    moveToRight = () => {
        if (this.disabled)
            return;
        const leftSelected = this.leftList
            .filter((item) => this.isSelected(item.key) && !item.disabled)
            .map((item) => item.key);
        if (leftSelected.length === 0)
            return;
        // 合并到 targetKeys（保持 data 中的顺序）
        const targetSet = new Set([...this.targetKeys, ...leftSelected]);
        this.targetKeys = this.data
            .filter((item) => targetSet.has(item.key))
            .map((item) => item.key);
        // 清除已移动项的勾选
        this.selectedKeys = this.selectedKeys.filter((k) => !leftSelected.includes(k));
        this.hbChange.emit({ targetKeys: this.targetKeys });
    };
    /** 向左移动：把右侧已勾选的项移回左侧 */
    moveToLeft = () => {
        if (this.disabled)
            return;
        const rightSelected = this.rightList
            .filter((item) => this.isSelected(item.key) && !item.disabled)
            .map((item) => item.key);
        if (rightSelected.length === 0)
            return;
        const removeSet = new Set(rightSelected);
        this.targetKeys = this.targetKeys.filter((k) => !removeSet.has(k));
        // 清除已移动项的勾选
        this.selectedKeys = this.selectedKeys.filter((k) => !removeSet.has(k));
        this.hbChange.emit({ targetKeys: this.targetKeys });
    };
    /** 列表项过滤 */
    filterList(list, keyword) {
        if (!keyword)
            return list;
        const lower = keyword.toLowerCase();
        return list.filter((item) => item.title.toLowerCase().includes(lower));
    }
    renderList = (list, title, filterValue, onFilter) => {
        const filteredList = this.filterList(list, filterValue);
        const selectableKeys = this.getSelectableKeys(list);
        const selectedCount = selectableKeys.filter((k) => this.isSelected(k)).length;
        const checkAllState = this.getCheckAllState(list);
        return (h("div", { class: { 'hb-transfer__panel': true, 'hb-transfer__panel--disabled': this.disabled } }, h("div", { class: "hb-transfer__panel-header" }, h("label", { class: "hb-transfer__check-all" }, h("input", { type: "checkbox", class: "hb-transfer__check-all-input", checked: checkAllState === 'all', disabled: this.disabled || selectableKeys.length === 0, onChange: () => this.toggleCheckAll(list) }), h("span", null, selectedCount > 0 ? `${selectedCount}/` : '', selectableKeys.length, " \u9879")), h("span", { class: "hb-transfer__panel-title" }, title)), this.filterable && (h("div", { class: "hb-transfer__panel-filter" }, h("input", { type: "text", class: "hb-transfer__filter-input", placeholder: "\u8BF7\u8F93\u5165\u641C\u7D22\u5185\u5BB9", value: filterValue, disabled: this.disabled, onInput: onFilter }))), h("div", { class: "hb-transfer__panel-body" }, filteredList.length === 0 ? (h("div", { class: "hb-transfer__empty" }, "\u65E0\u6570\u636E")) : (filteredList.map((item) => (h("label", { class: {
                'hb-transfer__item': true,
                'hb-transfer__item--checked': this.isSelected(item.key),
                'hb-transfer__item--disabled': this.disabled || !!item.disabled,
            } }, h("input", { type: "checkbox", class: "hb-transfer__item-input", checked: this.isSelected(item.key), disabled: this.disabled || !!item.disabled, onChange: () => this.toggleItem(item) }), h("span", { class: "hb-transfer__item-title" }, item.title))))))));
    };
    render() {
        const leftCheckAllState = this.getCheckAllState(this.leftList);
        const rightCheckAllState = this.getCheckAllState(this.rightList);
        return (h("div", { key: 'e8b42f296636c208e67adb4dfd105f72ccd96406', class: { 'hb-transfer': true, 'hb-transfer--disabled': this.disabled } }, this.renderList(this.leftList, this.titles[0], this.leftFilter, (e) => {
            this.leftFilter = e.target.value;
        }), h("div", { key: 'fbb9d1ab5a4782e2d7be4e5ba8b6d2378cf5dd4f', class: "hb-transfer__operations" }, h("button", { key: '8c598127a30fc7cc82711ccbc5ae695363f20eeb', type: "button", class: "hb-transfer__operation-btn", disabled: this.disabled || rightCheckAllState === 'none', onClick: this.moveToLeft, "aria-label": "\u5411\u5DE6\u79FB\u52A8" }, "\u2039"), h("button", { key: '95ab5ae8b686fc032a7e88e4d798d0190a7163ed', type: "button", class: "hb-transfer__operation-btn", disabled: this.disabled || leftCheckAllState === 'none', onClick: this.moveToRight, "aria-label": "\u5411\u53F3\u79FB\u52A8" }, "\u203A")), this.renderList(this.rightList, this.titles[1], this.rightFilter, (e) => {
            this.rightFilter = e.target.value;
        })));
    }
    static get is() { return "hb-transfer"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["transfer.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["transfer.css"]
        };
    }
    static get properties() {
        return {
            "data": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "TransferDataItem[]",
                    "resolved": "TransferDataItem[]",
                    "references": {
                        "TransferDataItem": {
                            "location": "local",
                            "path": "/Users/vscoderwhy/Desktop/product/web-common/huibo-ui/src/components/Transfer/Transfer.tsx",
                            "id": "src/components/Transfer/Transfer.tsx::TransferDataItem"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u6570\u636E\u6E90"
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "targetKeys": {
                "type": "unknown",
                "mutable": true,
                "complexType": {
                    "original": "string[]",
                    "resolved": "string[]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u53F3\u4FA7\uFF08\u76EE\u6807\u5217\u8868\uFF09\u7684 keys"
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "selectedKeys": {
                "type": "unknown",
                "mutable": true,
                "complexType": {
                    "original": "string[]",
                    "resolved": "string[]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u4E24\u4FA7\u5DF2\u52FE\u9009\u7684 keys"
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "titles": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "[string, string]",
                    "resolved": "[string, string]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "['\u6E90\u5217\u8868', '\u76EE\u6807\u5217\u8868']"
                        }],
                    "text": "\u6807\u9898\uFF0C[\u6E90\u5217\u8868\u6807\u9898, \u76EE\u6807\u5217\u8868\u6807\u9898]"
                },
                "getter": false,
                "setter": false,
                "defaultValue": "['\u6E90\u5217\u8868', '\u76EE\u6807\u5217\u8868']"
            },
            "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"
            },
            "filterable": {
                "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\u641C\u7D22\u6846"
                },
                "getter": false,
                "setter": false,
                "attribute": "filterable",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "leftFilter": {},
            "rightFilter": {}
        };
    }
    static get events() {
        return [{
                "method": "hbChange",
                "name": "hbChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u53F3\u4FA7\u5217\u8868\u53D8\u5316\u4E8B\u4EF6"
                },
                "complexType": {
                    "original": "{ targetKeys: string[] }",
                    "resolved": "{ targetKeys: string[]; }",
                    "references": {}
                }
            }];
    }
    static get watchers() {
        return [{
                "propName": "selectedKeys",
                "methodName": "handleSelectedKeysChange"
            }];
    }
}
//# sourceMappingURL=Transfer.js.map
