import { __assign, __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useCallback } from 'react';
import TimePanel from '../time-panel/index';
import CombinedTimeFooter from './CombinedTimeFooter';
var prefixCls = 'zent-datepicker-combined-panel';
var CombinedTimeRangePanel = function (_a) {
    var onSelected = _a.onSelected, selected = _a.selected, disabledTimeOptionStart = _a.disabledTimeOptionStart, disabledTimeOptionEnd = _a.disabledTimeOptionEnd, defaultTime = _a.defaultTime, restProps = __rest(_a, ["onSelected", "selected", "disabledTimeOptionStart", "disabledTimeOptionEnd", "defaultTime"]);
    var start = selected[0], end = selected[1];
    var onChangeStartOrEnd = useCallback(function (index) { return function (val) {
        onSelected(index ? [selected[0], val] : [val, selected[1]]);
    }; }, [selected, onSelected]);
    return (_jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: prefixCls + "-body", "data-zv": 'v10.0.11' }, { children: [_jsx("div", __assign({ className: prefixCls + "-body-item", "data-zv": 'v10.0.11' }, { children: _jsx(TimePanel, __assign({}, restProps, { hideFooter: true, selected: start, defaultTime: defaultTime === null || defaultTime === void 0 ? void 0 : defaultTime[0], disabledTimeOption: disabledTimeOptionStart, onSelected: onChangeStartOrEnd(0) }), void 0) }), void 0), _jsx("div", { className: prefixCls + "-body-seperator", "data-zv": 'v10.0.11' }, void 0), _jsx("div", __assign({ className: prefixCls + "-body-item", "data-zv": 'v10.0.11' }, { children: _jsx(TimePanel, __assign({}, restProps, { hideFooter: true, selected: end, defaultTime: defaultTime === null || defaultTime === void 0 ? void 0 : defaultTime[1], disabledTimeOption: disabledTimeOptionEnd, onSelected: onChangeStartOrEnd(1) }), void 0) }), void 0)] }), void 0), _jsx(CombinedTimeFooter, { selected: selected, onSelected: onSelected }, void 0)] }, void 0));
};
export default CombinedTimeRangePanel;
