import { __assign, __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from 'classnames';
import { useCallback, useMemo } from 'react';
import Tooltip from '../../tooltip';
var prefixCls = 'zent-datepicker-panel-body-cells';
var getCellClassName = function (_a) {
    var _b;
    var isInView = _a.isInView, isCurrent = _a.isCurrent, isSelected = _a.isSelected, isDisabled = _a.isDisabled, isInRange = _a.isInRange, isInHoverRange = _a.isInHoverRange;
    return cx(prefixCls + "_item", (_b = {},
        _b[prefixCls + "_over"] = !isInView,
        _b[prefixCls + "_disabled"] = isDisabled,
        _b[prefixCls + "_available"] = !isSelected && !isDisabled,
        _b[prefixCls + "_current"] = isInView && isCurrent,
        _b[prefixCls + "_selected"] = isSelected,
        _b[prefixCls + "_in_range"] = !isDisabled && isInRange,
        _b[prefixCls + "_in_hover_range"] = !isDisabled && isInHoverRange,
        _b));
};
var PanelCell = function (_a) {
    var cells = _a.cells, onSelected = _a.onSelected, col = _a.col, popText = _a.popText, onHover = _a.onHover;
    var onCellClick = useCallback(function (_a) {
        var isDisabled = _a.isDisabled, value = _a.value;
        if (isDisabled)
            return;
        onSelected(value);
    }, [onSelected]);
    var onCellMouseOver = useCallback(function (_a) {
        var isDisabled = _a.isDisabled, value = _a.value;
        if (isDisabled)
            return;
        onHover === null || onHover === void 0 ? void 0 : onHover(value);
    }, [onHover]);
    var rows = useMemo(function () {
        var uls = [];
        var rowCells = [];
        cells.map(function (_a, index) {
            var value = _a.value, text = _a.text, lunarText = _a.lunarText, classNameProps = __rest(_a, ["value", "text", "lunarText"]);
            var isSelected = classNameProps.isSelected, isDisabled = classNameProps.isDisabled;
            var cellNode = (_jsx("li", __assign({ className: getCellClassName(classNameProps), onClick: function () { return onCellClick({ isDisabled: isDisabled, value: value }); }, "data-zv": 'v10.0.11' }, { children: lunarText ? (_jsxs("div", __assign({ className: "zent-datepicker-cell-inner zent-datepicker-lunar-cell", onMouseEnter: function () { return onCellMouseOver({ isDisabled: isDisabled, value: value }); }, onMouseLeave: function () { return onCellMouseOver({ isDisabled: isDisabled, value: null }); }, "data-zv": 'v10.0.11' }, { children: [_jsx("div", __assign({ "data-zv": 'v10.0.11' }, { children: text }), void 0), _jsx("div", __assign({ className: "zent-datepicker-lunar-cell_text", "data-zv": 'v10.0.11' }, { children: lunarText }), void 0)] }), void 0)) : (_jsx("div", __assign({ className: "zent-datepicker-cell-inner", onMouseEnter: function () { return onCellMouseOver({ isDisabled: isDisabled, value: value }); }, onMouseLeave: function () { return onCellMouseOver({ isDisabled: isDisabled, value: null }); }, "data-zv": 'v10.0.11' }, { children: text }), void 0)) }), value.getTime()));
            var cell = popText && isSelected ? (_jsx(Tooltip, __assign({ visible: true, title: popText }, { children: cellNode }), value.getTime())) : (cellNode);
            rowCells.push(cell);
            if (index % col === col - 1) {
                uls.push(_jsx("ul", __assign({ className: prefixCls + "_row", "data-zv": 'v10.0.11' }, { children: rowCells }), value.getTime()));
                rowCells = [];
            }
        });
        return uls;
    }, [cells, col, popText, onCellClick, onCellMouseOver]);
    return _jsx("ul", __assign({ className: prefixCls, "data-zv": 'v10.0.11' }, { children: rows }), void 0);
};
export default PanelCell;
