"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const core_1 = require("@material-ui/core");
const pickers_1 = require("@material-ui/pickers");
const dayjs_1 = tslib_1.__importDefault(require("@material-ui/pickers/adapter/dayjs"));
const zh_cn_1 = tslib_1.__importDefault(require("dayjs/locale/zh-cn"));
const dayjs_2 = tslib_1.__importDefault(require("dayjs"));
const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
function Title({ title, dateFilter, dateRangeFilter, additionalFilter, }) {
    const [date, setDate] = react_1.useState(new Date());
    const [dateRange, setDateRange] = react_1.useState([null, null]);
    const onDateChange = react_1.useCallback(throttle_1.default((date) => { var _a; return (_a = dateFilter === null || dateFilter === void 0 ? void 0 : dateFilter.onChange) === null || _a === void 0 ? void 0 : _a.call(dateFilter, date); }, 1000, {
        leading: false,
        trailing: true,
    }), []);
    const onDateRangeChange = react_1.useCallback(throttle_1.default((date) => { var _a; return (_a = dateRangeFilter === null || dateRangeFilter === void 0 ? void 0 : dateRangeFilter.onChange) === null || _a === void 0 ? void 0 : _a.call(dateRangeFilter, [
        dayjs_2.default(date[0]).isValid() ? date[0] : null,
        dayjs_2.default(date[1]).isValid() ? date[1] : null,
    ]); }, 1000, {
        leading: false,
        trailing: true,
    }), []);
    return (
    // @ts-ignore
    react_1.default.createElement(pickers_1.LocalizationProvider, { dateAdapter: dayjs_1.default, locale: zh_cn_1.default },
        react_1.default.createElement(core_1.Box, { display: "flex", alignItems: "center", overflow: "auto" },
            react_1.default.createElement(core_1.Box, { mr: 2 },
                react_1.default.createElement(core_1.Typography, { color: "textPrimary", variant: "h4" }, title)),
            dateFilter && (react_1.default.createElement(core_1.Box, { mr: 2 },
                react_1.default.createElement(pickers_1.DatePicker, { label: dateFilter.label || '日期', value: date, onChange: date => {
                        onDateChange(date);
                        setDate(date);
                    }, inputFormat: "yyyy-MM-dd", renderInput: props => (react_1.default.createElement(core_1.TextField, Object.assign({}, props, { variant: "outlined", margin: "dense", helperText: "", style: Object.assign({}, props.style, { width: 170 }) }))) }))),
            dateRangeFilter && (react_1.default.createElement(core_1.Box, { mr: 2 },
                react_1.default.createElement(pickers_1.DateRangePicker, { startText: "\u5F00\u59CB\u65E5\u671F", endText: "\u7ED3\u675F\u65E5\u671F", 
                    // @ts-ignore
                    value: dateRange, onChange: date => {
                        onDateRangeChange(date);
                        setDateRange(date);
                    }, inputFormat: "yyyy-MM-dd", renderInput: (startProps, endProps) => (react_1.default.createElement(react_1.default.Fragment, null,
                        react_1.default.createElement(core_1.TextField, Object.assign({}, startProps, { variant: "outlined", margin: "dense", helperText: "", error: false, style: Object.assign({}, startProps.style, { width: 170 }) })),
                        react_1.default.createElement(pickers_1.DateRangeDelimiter, null, " \u5230 "),
                        react_1.default.createElement(core_1.TextField, Object.assign({}, endProps, { variant: "outlined", margin: "dense", helperText: "", error: false, style: Object.assign({}, endProps.style, { width: 170 }) })))) }))),
            additionalFilter && react_1.default.createElement(core_1.Box, { mr: 2 }, additionalFilter))));
}
exports.default = Title;
