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

import { __extends, __assign } from 'tslib';
import { BaseSelection } from './Selection.js';
import { getTreeDepth, themeable, localeable, uncontrollable } from 'amis-core';
import React__default from 'react';
import Checkbox from './Checkbox.js';
import times from 'lodash/times';
import Spinner from './Spinner.js';
import VirtualList from './virtual-list/index.js';
import AutoSizer from './virtual-list/AutoSizer.js';

var ChainedSelection = /** @class */ (function (_super) {
    __extends(ChainedSelection, _super);
    function ChainedSelection() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            selected: []
        };
        return _this;
    }
    ChainedSelection.prototype.componentDidMount = function () {
        var defaultSelectedIndex = this.props.defaultSelectedIndex;
        // todo 以后支持自动展开
        if (defaultSelectedIndex !== undefined) {
            this.setState({
                selected: ["".concat(defaultSelectedIndex)]
            });
        }
    };
    ChainedSelection.prototype.selectOption = function (option, depth, id) {
        var _a = this.props, onDeferLoad = _a.onDeferLoad, _b = _a.deferField, deferField = _b === void 0 ? 'defer' : _b;
        var selected = this.state.selected.concat();
        selected.splice(depth, selected.length - depth);
        selected.push(id);
        this.setState({
            selected: selected
        }, option[deferField] && onDeferLoad ? function () { return onDeferLoad(option); } : undefined);
    };
    ChainedSelection.prototype.renderItem = function (option, index, depth, id, styles) {
        var _this = this;
        if (styles === void 0) { styles = {}; }
        var _a = this.props, labelClassName = _a.labelClassName, disabled = _a.disabled, cx = _a.classnames, itemClassName = _a.itemClassName, itemRender = _a.itemRender, multiple = _a.multiple, labelField = _a.labelField, testIdBuilder = _a.testIdBuilder;
        var valueArray = this.valueArray;
        var itemTIB = testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild("item-".concat(option.value || index));
        return (React__default.createElement("div", { style: styles, key: index, className: cx('ChainedSelection-item', itemClassName, option.className, disabled || option.disabled ? 'is-disabled' : '', !!~valueArray.indexOf(option) ? 'is-active' : ''), onClick: function () { return _this.toggleOption(option); } },
            multiple ? (React__default.createElement(Checkbox, { size: "sm", checked: !!~valueArray.indexOf(option), disabled: disabled || option.disabled, labelClassName: labelClassName, description: option.description, testIdBuilder: itemTIB })) : null,
            React__default.createElement("div", { className: cx('ChainedSelection-itemLabel') }, itemRender(option, {
                index: index,
                multiple: multiple,
                checked: !!~valueArray.indexOf(option),
                onChange: function () { return _this.toggleOption(option); },
                disabled: disabled || option.disabled,
                labelField: labelField,
                classnames: cx
            }))));
    };
    ChainedSelection.prototype.renderOption = function (option, index, depth, id, styles) {
        var _this = this;
        if (styles === void 0) { styles = {}; }
        var _a = this.props; _a.labelClassName; var disabled = _a.disabled, cx = _a.classnames, itemClassName = _a.itemClassName, itemRender = _a.itemRender, multiple = _a.multiple, labelField = _a.labelField, _b = _a.deferField, deferField = _b === void 0 ? 'defer' : _b, loadingConfig = _a.loadingConfig, testIdBuilder = _a.testIdBuilder;
        this.valueArray;
        var itemTIB = testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild("item-".concat(option.value || index));
        if (Array.isArray(option.children) || option[deferField]) {
            return (React__default.createElement("div", __assign({ style: styles, key: index, className: cx('ChainedSelection-item', itemClassName, option.className, disabled || option.disabled ? 'is-disabled' : '', ~this.state.selected.indexOf(id) ? 'is-active' : ''), onClick: function () { return _this.selectOption(option, depth, id); } }, itemTIB === null || itemTIB === void 0 ? void 0 : itemTIB.getTestId()),
                React__default.createElement("div", { className: cx('ChainedSelection-itemLabel') }, itemRender(option, {
                    index: index,
                    multiple: multiple,
                    checked: !!~this.state.selected.indexOf(id),
                    onChange: function () { return _this.selectOption(option, depth, id); },
                    disabled: disabled || option.disabled,
                    labelField: labelField,
                    classnames: cx
                })),
                option[deferField] && option.loading ? (React__default.createElement(Spinner, { loadingConfig: loadingConfig, size: "sm", show: true })) : null));
        }
        return this.renderItem(option, index, depth, id, styles);
    };
    ChainedSelection.prototype.renderCheckAll = function () {
        var _a = this.props, multiple = _a.multiple, checkAll = _a.checkAll, checkAllLabel = _a.checkAllLabel, cx = _a.classnames, __ = _a.translate, labelClassName = _a.labelClassName, itemClassName = _a.itemClassName;
        if (!multiple || !checkAll) {
            return null;
        }
        var availableOptions = this.getAvailableOptions();
        var valueArray = this.valueArray;
        var checkedAll = availableOptions.every(function (option) { return valueArray.indexOf(option) > -1; });
        var checkedPartial = availableOptions.some(function (option) { return valueArray.indexOf(option) > -1; });
        return (React__default.createElement("div", { className: cx('ChainedSelection-item', 'ChainedSelection-checkAll', itemClassName), onClick: this.toggleAll },
            React__default.createElement(Checkbox, { checked: checkedPartial, partial: checkedPartial && !checkedAll, size: "sm", labelClassName: labelClassName }),
            React__default.createElement("div", { className: cx('ChainedSelection-itemLabel') },
                React__default.createElement("span", null, __(checkAllLabel)))));
    };
    ChainedSelection.prototype.render = function () {
        var _this = this;
        var _a = this.props, value = _a.value, options = _a.options, className = _a.className, placeholder = _a.placeholder, cx = _a.classnames, option2value = _a.option2value; _a.itemRender; var __ = _a.translate, _b = _a.virtualThreshold, virtualThreshold = _b === void 0 ? 1000 : _b, _c = _a.itemHeight, itemHeight = _c === void 0 ? 32 : _c, virtualListHeight = _a.virtualListHeight; _a.testIdBuilder;
        this.valueArray = BaseSelection.value2array(value, options, option2value);
        var body = [];
        if (Array.isArray(options) && options.length) {
            var selected_1 = this.state.selected.concat();
            var depth = Math.min(getTreeDepth(options), 3);
            times(Math.max(depth - selected_1.length, 1), function () { return selected_1.push(null); });
            selected_1.reduce(function (_a, selected, depth) {
                var body = _a.body, options = _a.options, subTitle = _a.subTitle, indexes = _a.indexes, placeholder = _a.placeholder;
                var nextOptions = [];
                var nextSubTitle = '';
                var nextPlaceholder = '';
                var nextIndexes = indexes;
                if (Array.isArray(options) && options.length > virtualThreshold) {
                    options.forEach(function (option, index) {
                        var id = indexes.concat(index).join('-');
                        if (id === selected) {
                            nextSubTitle = option.subTitle;
                            nextOptions = option.children;
                            nextIndexes = indexes.concat(index);
                            nextPlaceholder = option.placeholder;
                        }
                    });
                    var finalOptions_1 = options.concat();
                    if (subTitle) {
                        finalOptions_1.unshift({
                            type: 'chainedSelection-subTitle',
                            value: subTitle
                        });
                    }
                    body.push(React__default.createElement("div", { key: depth, className: cx('ChainedSelection-col') },
                        React__default.createElement(AutoSizer, { minHeight: virtualListHeight }, function (_a) {
                            var height = _a.height;
                            return (React__default.createElement(VirtualList, { height: height, itemCount: finalOptions_1.length, itemSize: itemHeight, renderItem: function (_a) {
                                    var index = _a.index, style = _a.style;
                                    var option = finalOptions_1[index];
                                    if (!option) {
                                        return null;
                                    }
                                    if ((option === null || option === void 0 ? void 0 : option.type) === 'chainedSelection-subTitle') {
                                        return (React__default.createElement("div", { style: __assign(__assign({}, style), { width: '100%' }), key: indexes.join('-') + 'subTitle', className: cx('ChainedSelection-subTitle') }, option.value));
                                    }
                                    index = subTitle ? index - 1 : index;
                                    var id = indexes.concat(index).join('-');
                                    return _this.renderOption(option, index, depth, id, __assign(__assign({}, style), { width: '100%' }));
                                } }));
                        })));
                }
                else {
                    body.push(React__default.createElement("div", { key: depth, className: cx('ChainedSelection-col') },
                        subTitle ? (React__default.createElement("div", { className: cx('ChainedSelection-subTitle') }, subTitle)) : null,
                        Array.isArray(options) && options.length ? (options.map(function (option, index) {
                            var id = indexes.concat(index).join('-');
                            if (id === selected) {
                                nextSubTitle = option.subTitle;
                                nextOptions = option.children;
                                nextIndexes = indexes.concat(index);
                                nextPlaceholder = option.placeholder;
                            }
                            return _this.renderOption(option, index, depth, id);
                        })) : (React__default.createElement("div", { className: cx('ChainedSelection-placeholder') }, __(placeholder)))));
                }
                return {
                    options: nextOptions,
                    subTitle: nextSubTitle,
                    placeholder: nextPlaceholder,
                    indexes: nextIndexes,
                    body: body
                };
            }, {
                options: options,
                body: body,
                indexes: [],
                placeholder: placeholder
            });
        }
        return (React__default.createElement("div", { className: cx('ChainedSelection', className) }, body && body.length ? (React__default.createElement(React__default.Fragment, null,
            this.renderCheckAll(),
            body)) : (React__default.createElement("div", { className: cx('ChainedSelection-placeholder') }, __(placeholder)))));
    };
    return ChainedSelection;
}(BaseSelection));
var ChainedCheckboxes = themeable(localeable(uncontrollable(ChainedSelection, {
    value: 'onChange'
})));

export { ChainedSelection, ChainedCheckboxes as default };
