import React, { forwardRef, useRef, useState } from 'react';
import i18n from 'ui-i18n';
import { nanoid } from 'nanoid';
import { pathOr } from 'ramda';
import { DataTypes } from '@reltio/mdm-sdk';
import Button from '@mui/material/Button';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogActions from '@mui/material/DialogActions';
import { TimestampEditor } from '../TimestampEditor';
import { DateEditor } from '../DateEditor';
import { useStyles } from './styles';
var START_DATE = 0;
var END_DATE = 1;
var getDate = function (values, index) { return pathOr(null, [index], values); };
export var DateRangePicker = forwardRef(function (_a, ref) {
    var onApply = _a.onApply, values = _a.values, type = _a.type, minDate = _a.minDate, maxDate = _a.maxDate;
    var styles = useStyles();
    var editorFromId = useRef(nanoid());
    var editorToId = useRef(nanoid());
    var _b = useState(null), startDate = _b[0], setStartDate = _b[1];
    var _c = useState(null), endDate = _c[0], setEndDate = _c[1];
    React.useEffect(function () {
        setStartDate(getDate(values, START_DATE));
        setEndDate(getDate(values, END_DATE));
    }, [values]);
    var ComponentEditor = type === DataTypes.TYPE_TIMESTAMP ? TimestampEditor : DateEditor;
    var headerTitle = type === DataTypes.TYPE_TIMESTAMP ? i18n.text('Pick date and time') : i18n.text('Pick date');
    var selectStartDateHandler = function (value) {
        setStartDate(value);
    };
    var selectEndDateHandler = function (value) {
        setEndDate(value);
    };
    var onUpdate = function () {
        if (startDate && endDate && startDate > endDate) {
            onApply([endDate, startDate]);
        }
        else {
            onApply([startDate, endDate]);
        }
    };
    var onTabStopPropagation = function (e) { return e.key === 'Tab' && e.stopPropagation(); };
    return (React.createElement("div", { className: styles.container, ref: ref, onKeyDown: onTabStopPropagation },
        React.createElement(DialogTitle, null, headerTitle),
        React.createElement(DialogContent, { className: styles.dateRangeContainer },
            React.createElement(ComponentEditor, { slotProps: {
                    textField: {
                        id: editorFromId.current,
                        variant: 'filled',
                        size: 'small',
                        className: styles.dateInput
                    }
                }, label: i18n.text('From'), value: startDate, onChange: selectStartDateHandler, minDate: minDate, maxDate: maxDate }),
            React.createElement(ComponentEditor, { slotProps: {
                    textField: {
                        id: editorToId.current,
                        variant: 'filled',
                        size: 'small',
                        className: styles.dateInput
                    }
                }, label: i18n.text('To'), value: endDate, onChange: selectEndDateHandler, minDate: minDate, maxDate: maxDate })),
        React.createElement(DialogActions, null,
            React.createElement(Button, { color: "primary", onClick: onUpdate }, i18n.text('Update')))));
});
DateRangePicker.displayName = 'DateRangePicker';
