var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import React, { useState } from 'react';
import i18n from 'ui-i18n';
import { pipe } from 'ramda';
import classnames from 'classnames';
import { DateRangeTypes } from '@reltio/mdm-sdk';
import FormControlLabel from '@mui/material/FormControlLabel';
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import Typography from '@mui/material/Typography';
import { DateIntervalSelector } from '../DateIntervalSelector';
import { CustomDateRangeEditor } from '../CustomDateRangeEditor';
import { useDidUpdateEffect } from '../hooks/useDidUpdateEffect';
import { getValue } from '../helpers/events';
import { useStyles } from './styles';
var emptyDates = [null, null];
var emptyInterval = [null, 'minutes'];
export var DateRangeSelector = function (_a) {
    var value = _a.value, onChange = _a.onChange, dateRangeTypes = _a.dateRangeTypes;
    var styles = useStyles();
    var getInitPeriodByType = function (type) {
        if ((value === null || value === void 0 ? void 0 : value.type) === type) {
            return value.period;
        }
        else if (type === DateRangeTypes.WITHIN || type === DateRangeTypes.AGO) {
            return emptyInterval;
        }
        else if (type === DateRangeTypes.BETWEEN) {
            return emptyDates;
        }
    };
    var _b = useState(getInitPeriodByType(DateRangeTypes.BETWEEN)), datesInterval = _b[0], setDatesInterval = _b[1];
    var _c = useState(getInitPeriodByType(DateRangeTypes.WITHIN)), withinInterval = _c[0], setWithinInterval = _c[1];
    var _d = useState(getInitPeriodByType(DateRangeTypes.AGO)), agoInterval = _d[0], setAgoInterval = _d[1];
    var getCurrentPeriodByType = function (type) {
        if (type === DateRangeTypes.WITHIN) {
            return withinInterval;
        }
        else if (type === DateRangeTypes.AGO) {
            return agoInterval;
        }
        else if (type === DateRangeTypes.BETWEEN) {
            return datesInterval;
        }
    };
    var changeType = function (type) {
        if ((value === null || value === void 0 ? void 0 : value.type) !== type) {
            onChange({ period: getCurrentPeriodByType(type), type: type });
        }
    };
    var changePeriod = function (period) {
        onChange(__assign(__assign({}, value), { period: period }));
    };
    var isEditorVisible = function (_a) {
        var type = _a.type;
        return !dateRangeTypes || dateRangeTypes.includes(type);
    };
    useDidUpdateEffect(function () {
        if (value) {
            if (value.type === DateRangeTypes.WITHIN) {
                setWithinInterval(value.period);
            }
            else if (value.type === DateRangeTypes.AGO) {
                setAgoInterval(value.period);
            }
            else if (value.type === DateRangeTypes.BETWEEN) {
                setDatesInterval(value.period);
            }
        }
        else {
            setDatesInterval(emptyDates);
            setWithinInterval(emptyInterval);
            setAgoInterval(emptyInterval);
        }
    }, [value]);
    var editors = [
        {
            label: i18n.text('Within the last'),
            type: DateRangeTypes.WITHIN,
            editor: (React.createElement(DateIntervalSelector, { interval: withinInterval, onChange: changePeriod, onFocus: function () { return changeType(DateRangeTypes.WITHIN); } })),
            className: styles.dateOptionWithin
        },
        {
            label: i18n.text('More than'),
            type: DateRangeTypes.AGO,
            editor: (React.createElement(React.Fragment, null,
                React.createElement(DateIntervalSelector, { interval: agoInterval, onChange: changePeriod, onFocus: function () { return changeType(DateRangeTypes.AGO); } }),
                React.createElement(Typography, { className: styles.agoLabel, variant: 'subtitle1' }, i18n.text('Ago')))),
            className: styles.dateOptionAgo
        },
        {
            label: i18n.text('Date range'),
            type: DateRangeTypes.BETWEEN,
            editor: (React.createElement(CustomDateRangeEditor, { values: datesInterval, onChange: changePeriod, onFocus: function () { return changeType(DateRangeTypes.BETWEEN); } })),
            className: styles.dateOption
        }
    ];
    return (React.createElement(RadioGroup, { value: (value === null || value === void 0 ? void 0 : value.type) || null, onChange: pipe(getValue, changeType), "data-reltio-id": "reltio-date-range-selector" }, editors.filter(isEditorVisible).map(function (_a) {
        var type = _a.type, editor = _a.editor, label = _a.label, className = _a.className;
        return (React.createElement("div", { key: type, className: className },
            React.createElement(FormControlLabel, { value: type, label: label, control: React.createElement(Radio, { color: "primary" }), classes: { label: classnames(styles.dateOptionLabel, styles.labels) } }),
            editor));
    })));
};
