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, { useCallback, useEffect, useRef, useState } from 'react';
import i18n from 'ui-i18n';
import { curry, dissoc } from 'ramda';
import FilterListIcon from '@mui/icons-material/FilterList';
import Button from '@mui/material/Button';
import Popover from '@mui/material/Popover';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import Divider from '@mui/material/Divider';
import { isDateRangeValid } from '@reltio/mdm-sdk';
import { SmallIconButton } from '../../../SmallIconButton';
import { UserSelector } from '../../../UserSelector';
import { AttributeSelector } from '../../../AttributeSelector';
import { DateRangeSelector } from '../DateRangeSelector';
import { HistoryActivitySelector } from '../HistoryActivitySelector';
import { isDefaultFilter } from '../helpers/filters';
import { DEFAULT_HISTORY_FILTER } from '../constants';
import { useStyles } from './styles';
export var HistoryFilterButton = function (_a) {
    var className = _a.className, filter = _a.filter, onApplyFilter = _a.onApplyFilter, entityType = _a.entityType;
    var styles = useStyles();
    var buttonRef = useRef(null);
    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
    var _c = useState(filter), currentValue = _c[0], setCurrentValue = _c[1];
    var _d = currentValue || {}, _e = _d.activities, activities = _e === void 0 ? [] : _e, _f = _d.attributes, attributes = _f === void 0 ? [] : _f, _g = _d.dateRange, dateRange = _g === void 0 ? null : _g, _h = _d.users, users = _h === void 0 ? [] : _h;
    var buttonColor = isDefaultFilter(filter) ? 'inherit' : 'primary';
    useEffect(function () {
        if (isOpen) {
            setCurrentValue(filter);
        }
    }, [filter, isOpen]);
    var handlePropChange = curry(function (propName, value) {
        setCurrentValue(function (filterValue) {
            var _a;
            return (__assign(__assign({}, filterValue), (_a = {}, _a[propName] = value, _a)));
        });
    });
    var togglePopup = useCallback(function () {
        setIsOpen(function (open) { return !open; });
    }, []);
    var applyButtonHandler = useCallback(function () {
        if (dateRange && isDateRangeValid(dateRange)) {
            onApplyFilter(currentValue);
        }
        else {
            onApplyFilter(dissoc('dateRange', currentValue));
        }
        togglePopup();
    }, [currentValue, dateRange, onApplyFilter, togglePopup]);
    var clearAllButtonHandler = useCallback(function () {
        setCurrentValue(__assign({}, DEFAULT_HISTORY_FILTER));
    }, []);
    return (React.createElement(React.Fragment, null,
        React.createElement(SmallIconButton, { ref: buttonRef, color: buttonColor, icon: FilterListIcon, size: "L", onClick: togglePopup, className: className, "data-reltio-id": "history-filter-button" }),
        React.createElement(Popover, { classes: { paper: styles.popup }, open: isOpen, anchorEl: buttonRef.current, onClose: togglePopup, anchorOrigin: {
                vertical: 'bottom',
                horizontal: 'right'
            }, transformOrigin: {
                vertical: 'top',
                horizontal: 'right'
            } },
            React.createElement(DialogTitle, null, i18n.text('Filter')),
            React.createElement(DialogContent, { dividers: true, className: styles.filterContainer, "data-reltio-id": "history-filter-container" },
                React.createElement(DateRangeSelector, { value: dateRange, onChange: handlePropChange('dateRange'), className: styles.filterItem }),
                React.createElement(Divider, { light: true, className: styles.divider }),
                React.createElement(UserSelector, { selectedUsers: users, onChange: handlePropChange('users'), className: styles.filterItem, disableUnderline: true }),
                React.createElement(Divider, { light: true, className: styles.divider }),
                React.createElement(HistoryActivitySelector, { selectedHistoryActivityTypes: activities, onChange: handlePropChange('activities'), className: styles.filterItem, disableUnderline: true }),
                React.createElement(Divider, { light: true, className: styles.divider }),
                React.createElement(AttributeSelector, { selectedAttributes: attributes, entityType: entityType, onChange: handlePropChange('attributes'), className: styles.filterItem, title: i18n.text('Attribute updated'), disableUnderline: true })),
            React.createElement(DialogActions, null,
                React.createElement(Button, { onClick: clearAllButtonHandler, className: styles.clearButton }, i18n.text('Clear all')),
                React.createElement(Button, { onClick: togglePopup }, i18n.text('Cancel')),
                React.createElement(Button, { color: "primary", onClick: applyButtonHandler }, i18n.text('Apply'))))));
};
