import React, { useState } from 'react';
import { curry, pipe, assoc, when, mergeLeft, always } from 'ramda';
import i18n from 'ui-i18n';
import Button from '@mui/material/Button';
import Popover from '@mui/material/Popover';
import Divider from '@mui/material/Divider';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import { ActivityTypes } from '../types';
import { getSelectorActivityTypes } from './helpers';
import { ActivitySelector } from './components/ActivitySelector';
import { UserSelector } from '../../../UserSelector';
import { DateRangeSelector } from './components/DateRangeSelector';
import { EntityChangedSelectors } from './components/EntityChangedSelectors';
import { useDidUpdateEffect } from '../../../hooks/useDidUpdateEffect';
import { useMdmMetadata } from '../../../contexts/MdmModuleContext';
import { useStyles } from './styles';
export var ActivityFilterEditor = function (_a) {
    var value = _a.value, open = _a.open, entityType = _a.entityType, anchorEl = _a.anchorEl, onApply = _a.onApply, onCancel = _a.onCancel, onClear = _a.onClear;
    var styles = useStyles();
    var _b = useState(value), currentFilter = _b[0], setCurrentFilter = _b[1];
    var metadata = useMdmMetadata();
    var clearCurrentFilter = function () { return setCurrentFilter(null); };
    var handlePropChange = curry(function (propName, value) {
        setCurrentFilter(pipe(when(always(propName === 'entityTypes'), assoc('attributes', [])), when(always(propName === 'activities'), mergeLeft({ attributes: [], entityTypes: [], sources: [] })), assoc(propName, value)));
    });
    useDidUpdateEffect(function () {
        setCurrentFilter(value);
    }, [open, value]);
    var _c = currentFilter || {}, _d = _c.activities, activities = _d === void 0 ? [] : _d, _e = _c.dateRange, dateRange = _e === void 0 ? null : _e, _f = _c.users, users = _f === void 0 ? [] : _f;
    var isEntityChangedActivity = activities.length === 1 && activities.includes(ActivityTypes.ENTITY_CHANGED);
    return (React.createElement(Popover, { open: open, anchorEl: anchorEl, onClose: onCancel, classes: { paper: styles.container }, anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'right' } },
        React.createElement(DialogTitle, null, i18n.text('Filter')),
        React.createElement(DialogContent, { dividers: true, className: styles.editorFields },
            React.createElement(ActivitySelector, { activityTypes: getSelectorActivityTypes(metadata, entityType), selectedActivityTypes: activities, onChange: handlePropChange('activities') }),
            isEntityChangedActivity && (React.createElement(EntityChangedSelectors, { filter: currentFilter, entityType: entityType, onPropChange: handlePropChange })),
            React.createElement(Divider, { light: true, className: styles.divider }),
            React.createElement(DateRangeSelector, { value: dateRange, onChange: handlePropChange('dateRange') }),
            React.createElement(Divider, { light: true, className: styles.divider }),
            React.createElement(UserSelector, { selectedUsers: users, onChange: handlePropChange('users'), disableUnderline: true })),
        React.createElement(DialogActions, null,
            React.createElement(Button, { onClick: pipe(clearCurrentFilter, onClear), className: styles.clearButton }, i18n.text('Clear all')),
            React.createElement(Button, { onClick: onCancel }, i18n.text('Cancel')),
            React.createElement(Button, { color: "primary", onClick: function () { return onApply(currentFilter); } }, i18n.text('Apply')))));
};
