import { __assign, __rest, __spreadArrays } from "tslib";
import React, { useCallback, useContext, useEffect, useState } from 'react';
import classNames from 'classnames';
import { ConfigContext } from '../config-provider/config-context';
import { getPrefixCls } from '../_utils/general';
import { ArrowDown } from '../_utils/components';
import TransferPanel from './transfer-panel';
import Button from '../button/button';
var Transfer = React.forwardRef(function (props, ref) {
    var _a = props.dataSource, dataSource = _a === void 0 ? [] : _a, _b = props.defaultValue, defaultValue = _b === void 0 ? [] : _b, _c = props.buttonTexts, buttonTexts = _c === void 0 ? [] : _c, _d = props.placeholder, placeholder = _d === void 0 ? 'search' : _d, _e = props.showSearch, showSearch = _e === void 0 ? false : _e, _f = props.disabled, disabled = _f === void 0 ? false : _f, value = props.value, titles = props.titles, placeholders = props.placeholders, className = props.className, onChange = props.onChange, renderItem = props.renderItem, filterOption = props.filterOption, customisedCls = props.prefixCls, otherProps = __rest(props, ["dataSource", "defaultValue", "buttonTexts", "placeholder", "showSearch", "disabled", "value", "titles", "placeholders", "className", "onChange", "renderItem", "filterOption", "prefixCls"]);
    var configContext = useContext(ConfigContext);
    var prefixCls = getPrefixCls('transfer', configContext.prefixCls, customisedCls);
    var cls = classNames(prefixCls, className);
    var getDataKeys = useCallback(function () {
        var rightKeys = 'value' in props ? value : defaultValue;
        var rightData = dataSource.filter(function (item) { return rightKeys.includes(item.key); });
        var leftData = dataSource.filter(function (item) { return !rightKeys.includes(item.key); });
        return [leftData, rightData];
    }, [props, value, dataSource, defaultValue]);
    var _g = getDataKeys(), leftData = _g[0], rightData = _g[1];
    var _h = useState(leftData), sourceData = _h[0], setSourceData = _h[1];
    var _j = useState(rightData), targetData = _j[0], setTargetData = _j[1];
    var _k = useState([]), leftCheckedKeys = _k[0], setLeftCheckedKeys = _k[1];
    var _l = useState([]), rightCheckedKeys = _l[0], setRightCheckedKeys = _l[1];
    var addToLeft = function () {
        var leftKeys = sourceData.map(function (item) { return item.key; });
        var currKeys = leftKeys.slice();
        rightCheckedKeys.forEach(function (key) {
            if (!leftKeys.includes(key)) {
                currKeys.push(key);
            }
        });
        var targetData = dataSource.filter(function (item) { return !currKeys.includes(item.key); });
        if (!('value' in props)) {
            setRightCheckedKeys([]);
            setSourceData(__spreadArrays(dataSource.filter(function (item) { return currKeys.includes(item.key); })));
            setTargetData(__spreadArrays(targetData));
        }
        var targetKey = targetData.map(function (item) { return item.key; });
        onChange && onChange(targetKey, 'left', rightCheckedKeys);
    };
    var addToRight = function () {
        var rightKeys = targetData.map(function (item) { return item.key; });
        var currKeys = rightKeys.slice();
        leftCheckedKeys.forEach(function (key) {
            if (!rightKeys.includes(key)) {
                currKeys.push(key);
            }
        });
        if (!('value' in props)) {
            setLeftCheckedKeys([]);
            setSourceData(__spreadArrays(dataSource.filter(function (item) { return !currKeys.includes(item.key); })));
            setTargetData(__spreadArrays(dataSource.filter(function (item) { return currKeys.includes(item.key); })));
        }
        onChange && onChange(currKeys, 'right', leftCheckedKeys);
    };
    useEffect(function () {
        if ('value' in props) {
            var rightKeys_1 = props.value;
            var rightData_1 = dataSource.filter(function (item) { return rightKeys_1.includes(item.key); });
            var leftData_1 = dataSource.filter(function (item) { return !rightKeys_1.includes(item.key); });
            setSourceData(leftData_1);
            setTargetData(rightData_1);
            setLeftCheckedKeys([]);
            setRightCheckedKeys([]);
        }
    }, [props, dataSource]);
    return (React.createElement("div", __assign({}, otherProps, { className: cls, ref: ref }),
        React.createElement(TransferPanel, { title: titles && titles[0], placeholder: (placeholders && placeholders[0]) || placeholder, showSearch: showSearch, dataSource: sourceData, checkedKeys: leftCheckedKeys, disabled: disabled, onChange: function (keys) { return setLeftCheckedKeys(keys); }, renderItem: renderItem, filterOption: filterOption }),
        React.createElement("div", { className: prefixCls + "__buttons" },
            React.createElement(Button, { btnType: "primary", size: "sm", onClick: addToRight, disabled: leftCheckedKeys.length === 0 },
                React.createElement(ArrowDown, { size: 12, className: prefixCls + "__left-arrow" }),
                buttonTexts && buttonTexts[0] !== undefined && React.createElement("span", null, buttonTexts[0])),
            React.createElement(Button, { btnType: "primary", size: "sm", onClick: addToLeft, disabled: rightCheckedKeys.length === 0 },
                buttonTexts && buttonTexts[1] !== undefined && React.createElement("span", null, buttonTexts[1]),
                React.createElement(ArrowDown, { size: 12, className: prefixCls + "__right-arrow" }))),
        React.createElement(TransferPanel, { title: titles && titles[1], placeholder: (placeholders && placeholders[1]) || placeholder, showSearch: showSearch, dataSource: targetData, checkedKeys: rightCheckedKeys, disabled: disabled, onChange: function (keys) { return setRightCheckedKeys(keys); }, renderItem: renderItem, filterOption: filterOption })));
});
Transfer.displayName = 'Transfer';
export default Transfer;
//# sourceMappingURL=transfer.js.map