import { __assign, __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useContext, useMemo, useState } from 'react';
import { parse } from 'date-fns';
import Pop from '../../../pop';
import Button from '../../../button';
import TimePicker from '../../TimePicker';
import PanelFooter from '../../components/PanelFooter';
import PickerContext from '../../context/PickerContext';
import { formatDate } from '../../utils/index';
import useConfirmStatus from '../../hooks/useConfirmStatus';
var footerPrefixCls = 'zent-datepicker-panel-footer';
var today = new Date();
var DatePickerFooter = function (_a) {
    var footerText = _a.footerText, showTime = _a.showTime, disabledTime = _a.disabledTime, showTimeOption = _a.showTimeOption, selected = _a.selected, onSelected = _a.onSelected, disabledPanelDate = _a.disabledPanelDate;
    var _b = useState(false), timePickerIsOpen = _b[0], setTimePickerIsOpen = _b[1];
    var _c = useContext(PickerContext), i18n = _c.i18n, autoComplete = _c.autoComplete;
    var _d = (showTimeOption || {}).format, format = _d === void 0 ? '' : _d;
    var confirmStatus = useConfirmStatus({
        selected: formatDate(format, selected),
        disabledTimeOption: (selected && (disabledTime === null || disabledTime === void 0 ? void 0 : disabledTime(selected))) || {},
        format: format,
    });
    var isDisabledCurrent = useConfirmStatus({
        selected: formatDate(format, today),
        disabledTimeOption: (disabledTime === null || disabledTime === void 0 ? void 0 : disabledTime(today)) || {},
        format: format,
    });
    var isDisableConfirm = useMemo(function () { return selected && disabledPanelDate(selected); }, [selected, disabledPanelDate]);
    var isDisabledToday = useMemo(function () { return disabledPanelDate(today); }, [disabledPanelDate]);
    var onClickCurrent = useCallback(function () {
        if (isDisabledCurrent || isDisabledToday)
            return;
        onSelected(new Date());
    }, [isDisabledToday, isDisabledCurrent, onSelected]);
    var confirmHandler = useCallback(function () {
        selected && onSelected(selected);
    }, [selected, onSelected]);
    var confirmBtn = useMemo(function () { return (_jsx(Button, __assign({ type: "primary", disabled: confirmStatus || isDisableConfirm || !selected || timePickerIsOpen, onClick: confirmHandler, className: footerPrefixCls + "-btn" }, { children: i18n.confirm }), void 0)); }, [
        i18n,
        confirmStatus,
        selected,
        isDisableConfirm,
        confirmHandler,
        timePickerIsOpen,
    ]);
    var renderToday = useMemo(function () {
        return (_jsxs("div", __assign({ "data-zv": 'v10.0.12' }, { children: [_jsx(Button, __assign({ disabled: isDisabledCurrent || isDisabledToday, onClick: onClickCurrent, type: "text" }, { children: footerText }), void 0), !!showTime &&
                    (confirmStatus || isDisableConfirm ? (_jsx(Pop, __assign({ content: confirmStatus ? i18n.timeErrorPop : i18n.dateErrorPop, trigger: "hover" }, { children: confirmBtn }), void 0)) : (confirmBtn))] }), void 0));
    }, [
        i18n,
        showTime,
        footerText,
        confirmStatus,
        isDisableConfirm,
        isDisabledToday,
        isDisabledCurrent,
        confirmBtn,
        onClickCurrent,
    ]);
    var onTimeChange = useCallback(function (val) {
        if (!val)
            return;
        var timeVal = parse(val, format, selected || new Date());
        onSelected(timeVal, false);
    }, [selected, format, onSelected]);
    var onTimeOpen = useCallback(function () {
        setTimePickerIsOpen(true);
    }, []);
    var onTimeClose = useCallback(function () {
        setTimePickerIsOpen(false);
    }, []);
    var timeInput = useMemo(function () {
        var _a = showTimeOption || {}, defaultTime = _a.defaultTime, restOption = __rest(_a, ["defaultTime"]);
        var defaultTimeString = typeof defaultTime === 'function' ? defaultTime(selected) : defaultTime;
        return showTime ? (_jsx(TimePicker, __assign({}, restOption, { defaultTime: defaultTimeString, width: 94, selectedDate: selected, value: formatDate(format, selected), hiddenIcon: true, onChange: onTimeChange, onOpen: onTimeOpen, onClose: onTimeClose, disabledTime: disabledTime, autoComplete: autoComplete }), void 0)) : null;
    }, [
        autoComplete,
        selected,
        showTime,
        showTimeOption,
        format,
        disabledTime,
        onTimeChange,
        onTimeOpen,
        onTimeClose,
    ]);
    return _jsx(PanelFooter, { leftNode: timeInput, rightNode: renderToday }, void 0);
};
export default DatePickerFooter;
