import React from 'react';
import { pipe } from 'ramda';
import { getIntervalUnitLabel } from '@reltio/mdm-sdk';
import TextField from '@mui/material/TextField';
import { capitalize } from '@mui/material/utils';
import { getValue } from '../helpers/events';
import { SimpleDropDownSelector } from '../SimpleDropDownSelector';
import { useStyles } from './styles';
var periods = ['minutes', 'hours', 'days', 'weeks', 'months', 'years'];
export var DateIntervalSelector = function (_a) {
    var _b = _a.interval, value = _b[0], unit = _b[1], onChange = _a.onChange, onFocus = _a.onFocus;
    var styles = useStyles();
    var getIntervalFromValue = function (newValue) { return [newValue, unit]; };
    var getIntervalFromUnit = function (_a) {
        var newUnit = _a.value;
        return [value, newUnit];
    };
    var onNumberChange = pipe(getValue, parseInt, getIntervalFromValue, onChange);
    var onUnitChange = pipe(getIntervalFromUnit, onChange);
    return (React.createElement("div", { "data-reltio-id": "date-interval-selector", className: styles.root },
        React.createElement(TextField, { variant: "standard", type: "number", value: value || '', onChange: onNumberChange, inputProps: { min: 1, onFocus: onFocus }, InputProps: { classes: { root: styles.input } }, className: styles.inputNumber }),
        React.createElement(SimpleDropDownSelector, { label: '', placeholder: capitalize(unit), className: styles.inputUnit, value: { value: unit, label: capitalize(getIntervalUnitLabel(unit)) }, options: periods.map(function (value) { return ({
                value: value,
                label: capitalize(getIntervalUnitLabel(value))
            }); }), onChange: onUnitChange, TextFieldProps: {
                inputProps: { onFocus: onFocus },
                InputProps: { classes: { root: styles.input } }
            } })));
};
