import { MoreVerticalIcon } from '@fluentui/react-icons';
import { makeStyles, Popover } from '@material-ui/core';
import PropTypes from 'prop-types';
import React, { useState, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { ActionSummaryCard } from './';
import { evaluateRule, mapRule } from '../../utilities/rules/RuleUtilities';
import { PrimaryActionButton } from '../../UI/inputs/buttons/PrimaryActionButton';
import { Typography } from '../../UI/dataDisplay/typography/Typography';
const useStyles = makeStyles((theme) => {
    var _a, _b, _c;
    return ({
        root: {},
        actionsMenu: {
            color: (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.getContrastText((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.primary) === null || _c === void 0 ? void 0 : _c.main)
        }
    });
});
export const ActionSummaryPopover = (props) => {
    const { panelActions, noContrastColor, selectedNode, setLoading } = props;
    const classes = useStyles();
    const [anchorEl, setAnchorEl] = useState(null);
    const { t } = useTranslation();
    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
        setAnchorEl(null);
    };
    const actionSummaryPopoverActions = useMemo(() => {
        return panelActions === null || panelActions === void 0 ? void 0 : panelActions.reduce((actions, current) => {
            var _a;
            var _b;
            if (!current.enabled)
                return actions;
            const passRule = (_b = (_a = current.action.actionRules) === null || _a === void 0 ? void 0 : _a.reduce((boolValue, rule) => {
                var _a;
                const ruleExpression = mapRule(rule.mapping, rule.jsonLogic);
                return (boolValue &&
                    evaluateRule(ruleExpression, selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.nodeObj, (_a = selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.properties) === null || _a === void 0 ? void 0 : _a.joiningEntityCatalogObjectKey, selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.wasLazyLoaded));
            }, true)) !== null && _b !== void 0 ? _b : true;
            if (!passRule && (current === null || current === void 0 ? void 0 : current.hideAction))
                return actions;
            const currentVal = {
                value: current.action.name,
                actionId: current.actionId,
                sequence: current.sequence,
                enabled: passRule
            };
            const group = actions.find((action) => {
                var _a, _b;
                return ((_a = action === null || action === void 0 ? void 0 : action.header) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = current === null || current === void 0 ? void 0 : current.groupName) === null || _b === void 0 ? void 0 : _b.toLowerCase());
            });
            if (group) {
                group.items.push(currentVal);
                group.items.sort((a, b) => a.sequence - b.sequence);
            }
            else {
                actions.push({
                    header: current.groupName,
                    icon: current.icon.name,
                    iconType: current.icon.type,
                    items: [currentVal]
                });
            }
            return actions;
        }, []);
    }, [panelActions, selectedNode]);
    const open = Boolean(anchorEl);
    const id = open ? 'action-summary-popover' : undefined;
    return (React.createElement(React.Fragment, null, React.createElement(PrimaryActionButton, { onClick: handleClick, icon: React.createElement(MoreVerticalIcon, null) }, React.createElement(Typography, null, t('Actions'))), React.createElement(Popover, { id: id, open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: {
            vertical: 'bottom',
            horizontal: 'left'
        } }, React.createElement(ActionSummaryCard, { actionMenuContent: actionSummaryPopoverActions, setLoading: setLoading, selectedNode: selectedNode }))));
};
ActionSummaryPopover.propTypes = {
    /**
     * Actions configured within Action Panel
     */
    panelActions: PropTypes.array,
    /**
     * Boolean to toggle contrast color
     */
    noContrastColor: PropTypes.bool,
    /**
     * Action Panels
     */
    selectedNode: PropTypes.object
};
//# sourceMappingURL=ActionSummaryPopover.js.map