import { __assign } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useContext, useMemo } from 'react';
import cx from 'classnames';
import { parse, isSameDay } from 'date-fns';
import TimePicker from '../../TimePicker';
import Button from '../../../button';
import Pop from '../../../pop';
import PickerContext from '../../context/PickerContext';
import { formatDate } from '../../utils/index';
import useConfirmStatus from '../../hooks/useConfirmStatus';
import { DATE_FORMAT } from '../../constants';
var prefixCls = 'zent-datepicker-combined-panel-footer';
export var CombinedDateRangeFooter = function (_a) {
    var _b, _c;
    var selected = _a.selected, disabledStartTimes = _a.disabledStartTimes, disabledConfirm = _a.disabledConfirm, disabledEndTimes = _a.disabledEndTimes, onSelected = _a.onSelected, format = _a.format, _d = _a.hideConfirm, hideConfirm = _d === void 0 ? false : _d;
    var _e = useContext(PickerContext), i18n = _e.i18n, autoComplete = _e.autoComplete;
    var start = selected[0], end = selected[1];
    var startTimeStatus = useConfirmStatus({
        selected: formatDate(format, start),
        disabledTimeOption: (start && (disabledStartTimes === null || disabledStartTimes === void 0 ? void 0 : disabledStartTimes(start))) || {},
        format: format,
    });
    var endTimeStatus = useConfirmStatus({
        selected: formatDate(format, end),
        disabledTimeOption: (end && (disabledEndTimes === null || disabledEndTimes === void 0 ? void 0 : disabledEndTimes(end))) || {},
        format: format,
    });
    var disabledStatus = useMemo(function () { return disabledConfirm || endTimeStatus || startTimeStatus; }, [disabledConfirm, endTimeStatus, startTimeStatus]);
    var onStartTimeChange = useCallback(function (val) {
        var timeVal = selected[0] && parse(val, format, selected[0]);
        onSelected([timeVal, selected[1]]);
    }, [selected, format, onSelected]);
    var onEndTimeChange = useCallback(function (val) {
        var timeVal = selected[1] && parse(val, format, selected[1]);
        onSelected([selected[0], timeVal]);
    }, [selected, format, onSelected]);
    var confirmHandler = useCallback(function () {
        onSelected(selected, true);
    }, [selected, onSelected]);
    var confirmBtn = useMemo(function () { return (_jsx(Button, __assign({ type: "primary", onClick: confirmHandler, disabled: disabledStatus, className: prefixCls + "-confirm" }, { children: i18n.confirm }), void 0)); }, [i18n, disabledStatus, confirmHandler]);
    var confirmContent = useMemo(function () {
        if (hideConfirm) {
            return null;
        }
        if (disabledStatus) {
            return (_jsx(Pop, __assign({ content: start && end && isSameDay(start, end)
                    ? i18n.timeErrorPop
                    : i18n.dateErrorPop, trigger: "hover" }, { children: confirmBtn }), void 0));
        }
        return confirmBtn;
    }, [
        confirmBtn,
        disabledStatus,
        end,
        hideConfirm,
        i18n.dateErrorPop,
        i18n.timeErrorPop,
        start,
    ]);
    return (_jsxs(_Fragment, { children: [_jsx("div", __assign({ className: cx(prefixCls + "-item", (_b = {}, _b[prefixCls + "-null"] = !start, _b)), "data-zv": 'v10.0.11' }, { children: start ? formatDate(DATE_FORMAT, start) : i18n.start }), void 0), _jsx(TimePicker, { width: 94, className: prefixCls + "-item", disabled: !start, value: formatDate(format, start), hiddenIcon: true, format: format, onChange: onStartTimeChange, selectedDate: start, disabledTime: disabledStartTimes, autoComplete: autoComplete }, void 0), _jsx("div", __assign({ className: prefixCls + "-seperator", "data-zv": 'v10.0.11' }, { children: i18n.to }), void 0), _jsx("div", __assign({ className: cx(prefixCls + "-item", (_c = {}, _c[prefixCls + "-null"] = !end, _c)), "data-zv": 'v10.0.11' }, { children: end ? formatDate(DATE_FORMAT, end) : i18n.end }), void 0), _jsx(TimePicker, { width: 94, disabled: !end, className: prefixCls + "-item", value: formatDate(format, end), hiddenIcon: true, format: format, onChange: onEndTimeChange, selectedDate: end, disabledTime: disabledEndTimes, autoComplete: autoComplete }, void 0), confirmContent] }, void 0));
};
export default CombinedDateRangeFooter;
