import { __assign, __rest } from "tslib";
import React, { useContext, useState } from 'react';
import classNames from 'classnames';
import { ConfigContext } from '../config-provider/config-context';
import { getPrefixCls } from '../_utils/general';
import Checkbox from '../checkbox/checkbox';
import CheckboxGroup from '../checkbox/checkbox-group';
import Empty from '../empty';
import Input from '../input/input';
var TransferPanel = React.forwardRef(function (props, ref) {
    var dataSource = props.dataSource, checkedKeys = props.checkedKeys, title = props.title, placeholder = props.placeholder, footer = props.footer, showSearch = props.showSearch, className = props.className, onChange = props.onChange, renderItem = props.renderItem, filterOption = props.filterOption, allDisabled = props.disabled, customisedCls = props.prefixCls, otherProps = __rest(props, ["dataSource", "checkedKeys", "title", "placeholder", "footer", "showSearch", "className", "onChange", "renderItem", "filterOption", "disabled", "prefixCls"]);
    var configContext = useContext(ConfigContext);
    var prefixCls = getPrefixCls('transfer-panel', configContext.prefixCls, customisedCls);
    var cls = classNames(prefixCls, className);
    var _a = useState(''), query = _a[0], setQuery = _a[1];
    var getFilteredData = function () {
        return dataSource.filter(function (item) {
            if (typeof filterOption === 'function') {
                return filterOption(query, item);
            }
            else if (query.trim().length > 0) {
                var label = item.label;
                return label.toLowerCase().includes(query.toLowerCase());
            }
            else {
                return true;
            }
        });
    };
    var filteredData = getFilteredData();
    var checkableData = filteredData.filter(function (item) { return !item.disabled; });
    var isAllChecked = checkableData.length > 0 && checkedKeys.length === checkableData.length;
    var isIndeterminate = checkedKeys.length > 0 && checkedKeys.length < checkableData.length;
    var handleAllCheckedChange = function (e) {
        var isChecked = e.currentTarget.checked;
        var checkedKeys = isChecked ? checkableData.map(function (item) { return item.key; }) : [];
        onChange(checkedKeys);
    };
    var checkedSummary = function () {
        if (isIndeterminate || isAllChecked) {
            return checkedKeys.length + " / " + filteredData.length + " checked";
        }
        return filteredData.length + " items";
    };
    return (React.createElement("div", __assign({}, otherProps, { className: cls, ref: ref }),
        title && React.createElement("div", { className: prefixCls + "__header" }, title),
        React.createElement("div", { className: prefixCls + "__body" },
            showSearch && (React.createElement("div", { className: prefixCls + "__input-container" },
                React.createElement(Input, { clearable: true, size: "sm", placeholder: placeholder, value: query, onChange: function (e) {
                        setQuery(e.currentTarget.value);
                    }, onClearClick: function () { return setQuery(''); } }))),
            React.createElement("div", { className: prefixCls + "__list-container" }, filteredData.length > 0 ? (React.createElement(CheckboxGroup, { value: checkedKeys, onChange: function (values) { return onChange(values); }, className: prefixCls + "__list" }, filteredData.map(function (item) {
                var key = item.key, label = item.label, disabled = item.disabled;
                return (React.createElement(Checkbox, { key: key, value: key, disabled: allDisabled || disabled, className: prefixCls + "__list-item" }, renderItem ? renderItem(item) : label));
            }))) : (React.createElement(Empty, { className: prefixCls + "__not-found" })))),
        React.createElement("div", { className: prefixCls + "__footer" },
            React.createElement(Checkbox, { disabled: allDisabled, checked: isAllChecked, onChange: handleAllCheckedChange, indeterminate: isIndeterminate }, checkedSummary()),
            footer)));
});
TransferPanel.displayName = 'TransferPanel';
export default TransferPanel;
//# sourceMappingURL=transfer-panel.js.map