/**
 * amis-ui v6.12.0-beta.0
 * Copyright 2018-2025 fex
 */

import { __extends, __awaiter, __generator, __rest, __assign, __decorate, __metadata } from 'tslib';
import React__default from 'react';
import { filter, createObject, autobind, themeable, localeable } from 'amis-core';
import ThemedTabs, { Tab } from './Tabs.js';
import InputBox from './InputBox.js';
import TableCheckboxes from './TableSelection.js';
import Tree from './Tree.js';
import ChainedCheckboxes from './ChainedSelection.js';
import GroupedSelection from './GroupedSelection.js';
import Transfer from './Transfer.js';
import AssociatedCheckboxes from './AssociatedSelection.js';
import { Icon } from './icons.js';
import debounce from 'lodash/debounce';

var TabsTransfer = /** @class */ (function (_super) {
    __extends(TabsTransfer, _super);
    function TabsTransfer() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            inputValue: '',
            searchResult: null
        };
        _this.unmounted = false;
        _this.lazySearch = debounce(function (text, option) {
            (function (text) { return __awaiter(_this, void 0, void 0, function () {
                var onSearch, result;
                var _this = this;
                return __generator(this, function (_a) {
                    switch (_a.label) {
                        case 0:
                            onSearch = this.props.onSearch;
                            return [4 /*yield*/, onSearch(text, option, function (cancelExecutor) { return (_this.cancelSearch = cancelExecutor); })];
                        case 1:
                            result = _a.sent();
                            if (this.unmounted) {
                                return [2 /*return*/];
                            }
                            if (!Array.isArray(result)) {
                                throw new Error('onSearch 需要返回数组');
                            }
                            this.setState({
                                searchResult: result
                            });
                            return [2 /*return*/];
                    }
                });
            }); })(text).catch(function (e) { return console.error(e); });
        }, 250, {
            trailing: true,
            leading: false
        });
        return _this;
    }
    TabsTransfer.prototype.componentWillUnmount = function () {
        this.lazySearch.cancel();
        this.unmounted = true;
    };
    TabsTransfer.prototype.handleSearch = function (text, option) {
        var _this = this;
        // text 有值的时候，走搜索否则直接走 handleSeachCancel ，等同于右侧的 clear 按钮
        if (text) {
            this.setState({
                inputValue: text
            }, function () {
                // 如果有取消搜索，先取消掉。
                _this.cancelSearch && _this.cancelSearch();
                _this.lazySearch(text, option);
            });
        }
        else {
            this.handleSeachCancel();
        }
    };
    TabsTransfer.prototype.handleSeachCancel = function () {
        this.setState({
            inputValue: '',
            searchResult: null
        });
    };
    TabsTransfer.prototype.handleSearchKeyDown = function (e) {
        if (e.key === 'Enter') {
            e.preventDefault();
        }
    };
    TabsTransfer.prototype.handleTabChange = function (key) {
        var _a, _b;
        (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.onTabChange) === null || _b === void 0 ? void 0 : _b.call(_a, key);
        this.handleSeachCancel();
    };
    TabsTransfer.prototype.renderSearchResult = function (searchResult) {
        var _a = this.props, searchResultMode = _a.searchResultMode, noResultsText = _a.noResultsText, searchResultColumns = _a.searchResultColumns, cx = _a.classnames, value = _a.value, disabled = _a.disabled, onChange = _a.onChange, option2value = _a.option2value, cellRender = _a.cellRender, optionItemRender = _a.optionItemRender, itemHeight = _a.itemHeight, virtualThreshold = _a.virtualThreshold, onlyChildren = _a.onlyChildren, selectMode = _a.selectMode; _a.loadingConfig; var activeKey = _a.activeKey, optionsConfig = _a.options, _b = _a.valueField, valueField = _b === void 0 ? 'value' : _b, _c = _a.labelField, labelField = _c === void 0 ? 'label' : _c, testIdBuilder = _a.testIdBuilder;
        var options = searchResult || [];
        var mode = searchResultMode || selectMode; // 没有配置时默认和左侧选项展示形式一致
        var searchTIB = testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('search-result');
        var activeTab = optionsConfig[activeKey];
        return mode === 'table' ? (React__default.createElement(TableCheckboxes, { placeholder: noResultsText, className: cx('Transfer-checkboxes'), columns: searchResultColumns, options: options, value: value, disabled: disabled, onChange: onChange, option2value: option2value, cellRender: cellRender, itemHeight: itemHeight, virtualThreshold: virtualThreshold, testIdBuilder: searchTIB })) : mode === 'tree' ? (React__default.createElement(Tree, { placeholder: noResultsText, className: cx('Transfer-checkboxes'), options: options, value: value, disabled: disabled, onChange: onChange, joinValues: false, onlyChildren: onlyChildren, showIcon: false, multiple: true, cascade: true, autoCheckChildren: activeTab.autoCheckChildren, itemRender: optionItemRender
                ? function (item, states) {
                    return optionItemRender(item, states, {
                        panel: 'result'
                    });
                }
                : undefined, valueField: valueField, labelField: labelField, testIdBuilder: searchTIB })) : mode === 'chained' ? (React__default.createElement(ChainedCheckboxes, { placeholder: noResultsText, className: cx('Transfer-checkboxes'), options: options, value: value, disabled: disabled, onChange: onChange, option2value: option2value, itemRender: optionItemRender
                ? function (item, states) {
                    return optionItemRender(item, states, {
                        panel: 'result'
                    });
                }
                : undefined, itemHeight: itemHeight, virtualThreshold: virtualThreshold, valueField: valueField, labelField: labelField, testIdBuilder: searchTIB })) : (React__default.createElement(GroupedSelection, { placeholder: noResultsText, className: cx('Transfer-checkboxes'), options: options, value: value, disabled: disabled, onChange: onChange, option2value: option2value, itemRender: optionItemRender
                ? function (item, states) {
                    return optionItemRender(item, states, {
                        panel: 'result'
                    });
                }
                : undefined, itemHeight: itemHeight, virtualThreshold: virtualThreshold, valueField: valueField, labelField: labelField, testIdBuilder: searchTIB }));
    };
    TabsTransfer.prototype.renderSelect = function () {
        var _this = this;
        var _a = this.props, options = _a.options, placeholder = _a.placeholder, activeKey = _a.activeKey, cx = _a.classnames, __ = _a.translate, ctx = _a.ctx, mobileUI = _a.mobileUI, searchable = _a.searchable, testIdBuilder = _a.testIdBuilder;
        var showOptions = options.filter(function (item) { return item.visible !== false; });
        if (!Array.isArray(options) || !options.length) {
            return (React__default.createElement("div", { className: cx('TabsTransfer-placeholder') }, __(placeholder || 'placeholder.noOption')));
        }
        return (React__default.createElement(ThemedTabs, { mode: "line", className: cx('TabsTransfer-tabs'), onSelect: this.handleTabChange, activeKey: activeKey, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('tabs') }, showOptions.map(function (option, index) { return (React__default.createElement(Tab, { eventKey: index, key: index, title: filter(option.label || option.title, createObject(ctx, option)), className: "TabsTransfer-tab", testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild("tab-".concat(index)) },
            option.searchable || searchable ? (React__default.createElement("div", { className: cx('TabsTransfer-search', { 'is-mobile': mobileUI }) },
                React__default.createElement(InputBox, { value: _this.state.inputValue, onChange: function (text) { return _this.handleSearch(text, option); }, placeholder: __('Transfer.searchKeyword'), clearable: false, onKeyDown: _this.handleSearchKeyDown }, _this.state.searchResult !== null ? (React__default.createElement("a", { onClick: _this.handleSeachCancel },
                    React__default.createElement(Icon, { icon: "close", className: "icon" }))) : (React__default.createElement(Icon, { icon: "search", className: "icon" }))))) : null,
            _this.state.searchResult !== null
                ? _this.renderSearchResult(_this.state.searchResult)
                : _this.renderOptions(option))); })));
    };
    TabsTransfer.prototype.renderOptions = function (option) {
        var _a;
        var _b = this.props, cx = _b.classnames, value = _b.value, disabled = _b.disabled, multiple = _b.multiple, onChange = _b.onChange, option2value = _b.option2value, onDeferLoad = _b.onDeferLoad, onLeftDeferLoad = _b.onLeftDeferLoad, cellRender = _b.cellRender; _b.translate; var optionItemRender = _b.optionItemRender, itemHeight = _b.itemHeight, virtualThreshold = _b.virtualThreshold, onlyChildren = _b.onlyChildren, loadingConfig = _b.loadingConfig, _c = _b.initiallyOpen, initiallyOpen = _c === void 0 ? true : _c, _d = _b.valueField, valueField = _d === void 0 ? 'value' : _d, _e = _b.labelField, labelField = _e === void 0 ? 'label' : _e, _f = _b.deferField, deferField = _f === void 0 ? 'defer' : _f, testIdBuilder = _b.testIdBuilder;
        var selectMode = option.selectMode || this.props.selectMode;
        var selTIB = testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('selection');
        return selectMode === 'table' ? (React__default.createElement(TableCheckboxes, { className: cx('Transfer-checkboxes'), columns: option.columns, options: option.children || [], value: value, multiple: multiple, disabled: disabled, onChange: onChange, option2value: option2value, onDeferLoad: onDeferLoad, cellRender: cellRender, itemHeight: itemHeight, virtualThreshold: virtualThreshold, valueField: valueField, labelField: labelField, testIdBuilder: selTIB })) : selectMode === 'tree' ? (React__default.createElement(Tree, { loadingConfig: loadingConfig, className: cx('Transfer-checkboxes'), options: option.children || [], value: value, multiple: multiple, disabled: disabled, onChange: onChange, joinValues: false, showIcon: false, onlyChildren: (_a = option.onlyChildren) !== null && _a !== void 0 ? _a : onlyChildren, cascade: true, onDeferLoad: onDeferLoad, autoCheckChildren: option.autoCheckChildren, itemRender: optionItemRender
                ? function (item, states) {
                    return optionItemRender(item, states, {
                        panel: 'tab',
                        tag: option
                    });
                }
                : undefined, itemHeight: itemHeight, virtualThreshold: virtualThreshold, valueField: valueField, labelField: labelField, initiallyOpen: initiallyOpen, testIdBuilder: selTIB })) : selectMode === 'chained' ? (React__default.createElement(ChainedCheckboxes, { className: cx('Transfer-checkboxes'), options: option.children || [], value: value, multiple: multiple, disabled: disabled, onChange: onChange, option2value: option2value, onDeferLoad: onDeferLoad, defaultSelectedIndex: option.defaultSelectedIndex, itemRender: optionItemRender
                ? function (item, states) {
                    return optionItemRender(item, states, {
                        panel: 'tab',
                        tag: option
                    });
                }
                : undefined, itemHeight: itemHeight, virtualThreshold: virtualThreshold, valueField: valueField, labelField: labelField, testIdBuilder: selTIB })) : selectMode === 'associated' ? (React__default.createElement(AssociatedCheckboxes, { className: cx('Transfer-checkboxes'), options: option.children || [], value: value, multiple: multiple, disabled: disabled, onChange: onChange, option2value: option2value, onDeferLoad: onDeferLoad, onLeftDeferLoad: onLeftDeferLoad, leftMode: option.leftMode, leftOptions: option.leftOptions, leftDefaultValue: option.leftDefaultValue, loadingConfig: loadingConfig, itemRender: optionItemRender
                ? function (item, states) {
                    return optionItemRender(item, states, {
                        panel: 'tab',
                        tag: option
                    });
                }
                : undefined, itemHeight: itemHeight, virtualThreshold: virtualThreshold, valueField: valueField, labelField: labelField, deferField: deferField, testIdBuilder: selTIB })) : (React__default.createElement(GroupedSelection, { className: cx('Transfer-checkboxes'), options: option.children || [], value: value, multiple: multiple, disabled: disabled, onChange: onChange, option2value: option2value, onDeferLoad: onDeferLoad, itemRender: optionItemRender
                ? function (item, states) {
                    return optionItemRender(item, states, {
                        panel: 'tab',
                        tag: option
                    });
                }
                : undefined, itemHeight: itemHeight, virtualThreshold: virtualThreshold, valueField: valueField, labelField: labelField, testIdBuilder: selTIB }));
    };
    TabsTransfer.prototype.render = function () {
        var _a = this.props, className = _a.className, cx = _a.classnames; _a.optionItemRender; _a.onSearch; var mobileUI = _a.mobileUI, reset = __rest(_a, ["className", "classnames", "optionItemRender", "onSearch", "mobileUI"]);
        return (React__default.createElement(Transfer, __assign({}, reset, { mobileUI: mobileUI, statistics: false, classnames: cx, className: cx('TabsTransfer', className), selectRender: this.renderSelect })));
    };
    TabsTransfer.defaultProps = {
        multiple: true,
        onlyChildren: true
    };
    __decorate([
        autobind,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [String, Object]),
        __metadata("design:returntype", void 0)
    ], TabsTransfer.prototype, "handleSearch", null);
    __decorate([
        autobind,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", []),
        __metadata("design:returntype", void 0)
    ], TabsTransfer.prototype, "handleSeachCancel", null);
    __decorate([
        autobind,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Object]),
        __metadata("design:returntype", void 0)
    ], TabsTransfer.prototype, "handleSearchKeyDown", null);
    __decorate([
        autobind,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Number]),
        __metadata("design:returntype", void 0)
    ], TabsTransfer.prototype, "handleTabChange", null);
    __decorate([
        autobind,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", []),
        __metadata("design:returntype", void 0)
    ], TabsTransfer.prototype, "renderSelect", null);
    __decorate([
        autobind,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Object]),
        __metadata("design:returntype", void 0)
    ], TabsTransfer.prototype, "renderOptions", null);
    return TabsTransfer;
}(React__default.Component));
var TabsTransfer$1 = themeable(localeable(TabsTransfer));

export { TabsTransfer, TabsTransfer$1 as default };
