import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Field } from '../../../utilities/form';
import { FluentDatePicker } from '../pickers/FluentDatePicker';
import { Grid } from '../../Grid';
const DateRangeField = props => {
    var _a, _b, _c, _d, _e, _f;
    const { fieldName, startDateProps = {}, endDateProps = {}, sameRow = false, initialValues, } = props;
    const [maxStartDate, setMaxStartDate] = useState();
    const [minEndDate, setMinEndDate] = useState();
    const { t } = useTranslation();
    useEffect(() => {
        var _a;
        const currentStartDate = initialValues[(_a = startDateProps === null || startDateProps === void 0 ? void 0 : startDateProps.name) !== null && _a !== void 0 ? _a : 'startDate'];
        if (currentStartDate) {
            let minDate = new Date(currentStartDate);
            minDate.setDate((minDate === null || minDate === void 0 ? void 0 : minDate.getDate()) + 1);
            setMinEndDate(minDate);
        }
        else {
            setMinEndDate(undefined);
        }
    }, [initialValues, startDateProps.name]);
    useEffect(() => {
        var _a;
        const currentEndDate = initialValues[(_a = endDateProps === null || endDateProps === void 0 ? void 0 : endDateProps.name) !== null && _a !== void 0 ? _a : 'endDate'];
        if (currentEndDate) {
            let maxDate = new Date(currentEndDate);
            maxDate.setDate((maxDate === null || maxDate === void 0 ? void 0 : maxDate.getDate()) - 1);
            maxDate.setHours(0, 0, 0, 0);
            setMaxStartDate(maxDate);
        }
        else {
            setMaxStartDate(undefined);
        }
    }, [endDateProps.name, initialValues]);
    return (React.createElement(Grid, { container: true, spacing: sameRow ? 2 : 0 }, React.createElement(Grid, { item: true, xs: 12, sm: sameRow ? 6 : 12 }, React.createElement(Field, Object.assign({}, startDateProps, { parse: value => (value ? value : null), format: value => (value ? value : null), label: (_a = startDateProps === null || startDateProps === void 0 ? void 0 : startDateProps.label) !== null && _a !== void 0 ? _a : t('Start Date'), name: `${fieldName}.${(_b = startDateProps === null || startDateProps === void 0 ? void 0 : startDateProps.name) !== null && _b !== void 0 ? _b : 'startDate'}`, key: `${fieldName}.${(_c = startDateProps === null || startDateProps === void 0 ? void 0 : startDateProps.name) !== null && _c !== void 0 ? _c : 'startDate'}`, component: FluentDatePicker, size: "small", maxDate: maxStartDate, allowNull: true }))), React.createElement(Grid, { item: true, xs: 12, sm: sameRow ? 6 : 12 }, React.createElement(Field, Object.assign({}, endDateProps, { parse: value => value !== null && value !== void 0 ? value : null, format: value => value !== null && value !== void 0 ? value : null, label: (_d = endDateProps === null || endDateProps === void 0 ? void 0 : endDateProps.label) !== null && _d !== void 0 ? _d : t('End Date'), name: `${fieldName}.${(_e = endDateProps === null || endDateProps === void 0 ? void 0 : endDateProps.name) !== null && _e !== void 0 ? _e : 'endDate'}`, key: `${fieldName}.${(_f = endDateProps === null || endDateProps === void 0 ? void 0 : endDateProps.name) !== null && _f !== void 0 ? _f : 'endDate'}`, component: FluentDatePicker, size: "small", minDate: minEndDate, allowNull: true })))));
};
export default DateRangeField;
//# sourceMappingURL=DateRangeField.js.map