import React, { useState } from 'react';
import i18n from 'ui-i18n';
import classnames from 'classnames';
import { DateRangeTypes } from '@reltio/mdm-sdk';
import Typography from '@mui/material/Typography';
import { useDidUpdateEffect } from '../../../hooks/useDidUpdateEffect';
import { DateIntervalSelector } from '../../../DateIntervalSelector';
import { CustomDateRangeEditor } from '../../../CustomDateRangeEditor';
import { SimpleDropDownSelector } from '../../../SimpleDropDownSelector';
import { dateRangeTypeOptions, getDateRangeTypeLabel } from './helpers';
import { useStyles } from './styles';
var emptyDates = [null, null];
var emptyInterval = [null, 'hours'];
export var DateRangeSelector = function (_a) {
    var value = _a.value, onChange = _a.onChange, className = _a.className;
    var styles = useStyles();
    var isIntervalType = function (type) { return type === DateRangeTypes.WITHIN || type === DateRangeTypes.AGO; };
    var isBetweenType = function (type) { return type === DateRangeTypes.BETWEEN; };
    var initDatesInterval = isBetweenType(value === null || value === void 0 ? void 0 : value.type) ? value.period : emptyDates;
    var initInterval = isIntervalType(value === null || value === void 0 ? void 0 : value.type) ? value.period : emptyInterval;
    var _b = useState(initDatesInterval), datesInterval = _b[0], setDatesInterval = _b[1];
    var _c = useState(initInterval), interval = _c[0], setInterval = _c[1];
    var selectedType = (value === null || value === void 0 ? void 0 : value.type) || DateRangeTypes.WITHIN;
    var getCurrentPeriodByType = function (type) {
        if (isIntervalType(type)) {
            return interval;
        }
        else if (isBetweenType(type)) {
            return datesInterval;
        }
    };
    var changeType = function (_a) {
        var type = _a.value;
        if ((value === null || value === void 0 ? void 0 : value.type) !== type) {
            onChange({ period: getCurrentPeriodByType(type), type: type });
        }
    };
    var changePeriod = function (period) {
        onChange({ type: selectedType, period: period });
    };
    useDidUpdateEffect(function () {
        if (value) {
            if (isIntervalType(value.type)) {
                setInterval(value.period);
            }
            else if (isBetweenType(value.type)) {
                setDatesInterval(value.period);
            }
        }
        else {
            setDatesInterval(emptyDates);
            setInterval(emptyInterval);
        }
    }, [value]);
    return (React.createElement("div", { className: classnames(styles.root, className), "data-reltio-id": "date-range-selector" },
        React.createElement(Typography, { className: styles.title, variant: 'subtitle1' }, i18n.text('Date')),
        React.createElement("div", { className: styles.intervalContainer },
            React.createElement(SimpleDropDownSelector, { label: '', className: styles.typeInput, value: {
                    value: selectedType,
                    label: getDateRangeTypeLabel(selectedType)
                }, options: dateRangeTypeOptions.map(function (option) { return ({
                    value: option,
                    label: getDateRangeTypeLabel(option)
                }); }), onChange: changeType }),
            isIntervalType(selectedType) ? (React.createElement(DateIntervalSelector, { interval: interval, onChange: changePeriod })) : (React.createElement(CustomDateRangeEditor, { values: datesInterval, onChange: changePeriod })))));
};
