import { __assign, __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useCallback, useEffect, useMemo } from 'react';
import cx from 'classnames';
import pick from '../../utils/pick';
import Grid from '../../grid';
import { I18nReceiver as Receiver } from '../../i18n';
import MiniPagination from '../../pagination/MiniPagination';
import { PassDownGridProps } from '../constants';
import { getDisabledKeys } from '../utils';
import Search from './Search';
import AllCheckBox from './AllCheckBox';
var TransferItem = function (_a) {
    var prefix = _a.prefix, title = _a.title, dataSets = _a.dataSets, selectedKeys = _a.selectedKeys, handleSelectChange = _a.handleSelectChange, keyName = _a.keyName, filterOption = _a.filterOption, showSearch = _a.showSearch, searchPlaceholder = _a.searchPlaceholder, list = _a.list, pagination = _a.pagination, compontentDisabled = _a.disabled;
    var classNamePrefix = prefix + "__item";
    var pageSize = typeof pagination === 'object' ? pagination.pageSize : 10;
    var columns = list.columns, selection = list.selection, gridRest = __rest(list, ["columns", "selection"]);
    var _b = useState(''), inputVal = _b[0], setInputVal = _b[1];
    var _c = useState(dataSets), listData = _c[0], setListData = _c[1];
    var _d = useState(1), pageCurrent = _d[0], setPageCurrent = _d[1];
    var disabledKeys = useMemo(function () { return getDisabledKeys(listData, keyName); }, [listData, keyName]);
    var selectedKeysLength = useMemo(function () { return selectedKeys.filter(function (key) { return !disabledKeys.includes(key); }).length; }, [disabledKeys, selectedKeys]);
    var isAllChecked = useMemo(function () {
        return selectedKeysLength &&
            selectedKeysLength ===
                listData.filter(function (_a) {
                    var disabled = _a.disabled;
                    return !disabled;
                }).length;
    }, [listData, selectedKeysLength]);
    var getCheckboxProps = useCallback(function (_a) {
        var disabled = _a.disabled;
        return ({
            disabled: compontentDisabled || disabled,
        });
    }, [compontentDisabled]);
    var handleCheckBoxChange = useCallback(function () {
        var items = listData.map(function (_a) {
            var _b = keyName, key = _a[_b];
            return key;
        });
        handleSelectChange(items.filter(function (key) {
            return isAllChecked
                ? disabledKeys.includes(key) && selectedKeys.includes(key)
                : !disabledKeys.includes(key) || selectedKeys.includes(key);
        }));
    }, [
        handleSelectChange,
        listData,
        selectedKeys,
        keyName,
        disabledKeys,
        isAllChecked,
    ]);
    var handleInputChange = useCallback(function (e) {
        var val = e.target.value;
        setInputVal(val);
    }, []);
    var handleRowClick = useCallback(function (data) {
        var _a = data, _b = keyName, key = _a[_b], disabled = _a.disabled;
        !disabled &&
            !compontentDisabled &&
            handleSelectChange(selectedKeys.includes(key)
                ? selectedKeys.filter(function (item) { return key !== item; })
                : selectedKeys.concat(key));
    }, [handleSelectChange, selectedKeys, keyName, compontentDisabled]);
    var handlePageChange = useCallback(function (_a) {
        var current = _a.current;
        setPageCurrent(current);
    }, []);
    var currentPageData = useMemo(function () {
        if (!pagination) {
            return listData;
        }
        return listData.slice(pageCurrent * pageSize - pageSize, pageCurrent * pageSize);
    }, [listData, pageCurrent, pagination, pageSize]);
    var girdColumns = useMemo(function () {
        var _a;
        var res = ((_a = columns[0]) === null || _a === void 0 ? void 0 : _a.title)
            ? columns
            : columns.map(function (item) { return (__assign(__assign({}, item), { title: '' })); });
        return res;
    }, [columns]);
    useEffect(function () {
        setListData(showSearch && filterOption
            ? dataSets.filter(function (item) { return filterOption(inputVal, item); })
            : dataSets);
    }, [dataSets, filterOption, inputVal, showSearch]);
    useEffect(function () {
        if (pagination && listData.length) {
            var maxPageCount = Math.ceil(listData.length / pageSize);
            if (pageCurrent > maxPageCount) {
                setPageCurrent(maxPageCount);
            }
        }
    }, [listData, pageCurrent, pageSize, pagination]);
    return (_jsx(Receiver, __assign({ componentName: "Transfer" }, { children: function (i18n) {
            var _a, _b, _c;
            var _d;
            return (_jsxs("div", __assign({ className: cx(classNamePrefix, (_a = {},
                    _a[classNamePrefix + "--disabled"] = compontentDisabled,
                    _a)), "data-zv": 'v10.0.11' }, { children: [_jsx(AllCheckBox, { classNamePrefix: classNamePrefix, isAllChecked: isAllChecked, handleCheckBoxChange: handleCheckBoxChange, compontentDisabled: compontentDisabled, i18n: i18n, selectedKeysLength: selectedKeysLength, listDataLength: listData.length, title: title }, void 0), _jsx(Search, { showSearch: showSearch, searchPlaceholder: searchPlaceholder, handleInputChange: handleInputChange, inputVal: inputVal, classNamePrefix: classNamePrefix, i18n: i18n }, void 0), _jsx(Grid, __assign({ rowKey: keyName, className: cx(classNamePrefix + "__grid", (_b = {},
                            _b[classNamePrefix + "__header--hidden"] = false === !!((_d = columns[0]) === null || _d === void 0 ? void 0 : _d.title),
                            _b)), rowClassName: cx(classNamePrefix + "__grid__row", (_c = {},
                            _c[classNamePrefix + "__grid__row--disabled"] = compontentDisabled,
                            _c)), datasets: currentPageData, selection: {
                            selectedRowKeys: selectedKeys,
                            onSelect: handleSelectChange,
                            getCheckboxProps: (selection === null || selection === void 0 ? void 0 : selection.getCheckboxProps) || getCheckboxProps,
                        }, columns: girdColumns, onRowClick: handleRowClick, emptyLabel: i18n.emptyLabel, scroll: { y: 240 } }, pick(gridRest, PassDownGridProps)), void 0), pagination && listData.length ? (_jsx(MiniPagination, { className: classNamePrefix + "__pagination", current: pageCurrent, pageSize: pageSize, total: listData.length, onChange: handlePageChange }, void 0)) : null] }), void 0));
        } }), void 0));
};
export default TransferItem;
