import { useActions } from "../../hooks/useActions.mjs";
import React, { useMemo } from "react";
import { Chip, makeStyles } from "@material-ui/core";
//#region src/actions/actionSummary/ActionSummaryListItem.tsx
const useStyles = makeStyles((theme) => ({
	listItemWithChip: {
		paddingTop: 1,
		paddingBottom: 1,
		alignItems: "start"
	},
	listItemGutters: { paddingLeft: 10 },
	chipSelected: {
		backgroundColor: theme.palette.secondary.main + "1A",
		color: theme?.getThemeData()?.mode === "light" ? "black" : "white"
	},
	chipWhite: {
		color: theme?.getThemeData()?.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" }
	}
}));
const ActionSummaryListItem = ({ value, highlighted, enabled, actionId, selectedNode }) => {
	const classes = useStyles();
	const { triggerAction } = useActions();
	return useMemo(() => {
		return /* @__PURE__ */ React.createElement("div", { className: classes.listItemWithChip }, /* @__PURE__ */ React.createElement(Chip, {
			color: "primary",
			clickable: enabled,
			onClick: enabled ? () => triggerAction(actionId, selectedNode?.nodeObj) : () => {},
			classes: {
				colorPrimary: enabled ? highlighted ? classes.chipSelected : classes.chipWhite : classes.chipWhiteDeselected,
				root: classes.chipRoot,
				clickableColorPrimary: classes.chipHover
			},
			label: value
		}));
	}, [
		highlighted,
		enabled,
		value
	]);
};
//#endregion
export { ActionSummaryListItem };

//# sourceMappingURL=ActionSummaryListItem.mjs.map