import React, { useMemo } from 'react';
import { Chip, makeStyles } from '@material-ui/core';
import { useActions } from '../../hooks/useActions';
const useStyles = makeStyles((theme) => {
    var _a, _b;
    return ({
        listItemWithChip: {
            paddingTop: 1,
            paddingBottom: 1,
            alignItems: 'start'
        },
        listItemGutters: {
            paddingLeft: 10
        },
        chipSelected: {
            backgroundColor: theme.palette.secondary.main + '1A',
            color: ((_a = theme === null || theme === void 0 ? void 0 : theme.getThemeData()) === null || _a === void 0 ? void 0 : _a.mode) === 'light' ? 'black' : 'white'
        },
        chipWhite: {
            color: ((_b = theme === null || theme === void 0 ? void 0 : theme.getThemeData()) === null || _b === void 0 ? void 0 : _b.mode) === 'light' ? 'black' : 'white',
            backgroundColor: theme.palette.background.paper
        },
        chipRoot: {
            width: '100%',
            justifyContent: 'start',
            paddingTop: 1
        },
        chipWhiteDeselected: {
            color: 'grey',
            backgroundColor: theme.palette.background.paper
        },
        chipHover: {
            '&:hover': {
                backgroundColor: theme.palette.secondary.main + '3A'
            },
            '&:focus': {
                backgroundColor: theme.palette.secondary.main + '3A'
            }
        }
    });
});
export const ActionSummaryListItem = ({ value, highlighted, enabled, actionId, selectedNode }) => {
    const classes = useStyles();
    const { triggerAction } = useActions();
    const render = useMemo(() => {
        return (React.createElement("div", { className: classes.listItemWithChip }, React.createElement(Chip, { color: "primary", clickable: enabled, onClick: enabled
                ? () => triggerAction(actionId, selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.nodeObj)
                : () => { }, classes: {
                colorPrimary: enabled
                    ? highlighted
                        ? classes.chipSelected
                        : classes.chipWhite
                    : classes.chipWhiteDeselected,
                root: classes.chipRoot,
                clickableColorPrimary: classes.chipHover
            }, label: value })));
    }, [highlighted, enabled, value]);
    return render;
};
//# sourceMappingURL=ActionSummaryListItem.js.map