import { NodeActionTriggerEnums, TreeViewModeEnums } from "../enums/unitySystemEnums.mjs";
import { UnityFluentIcon } from "../utilities/iconLibrary/UnityFluentIcon.mjs";
import { getIconFromName } from "../utilities/tree/TreeUtilities.mjs";
import { getUnityIconFromName } from "../utilities/iconLibrary/UnityIconLibrary.mjs";
import { StatusChip } from "../UI/dataDisplay/status/StatusChip.mjs";
import { AggregateChip } from "../UI/utilityDisplay/AggregateChip.mjs";
import React, { useCallback } from "react";
import { CircularProgress, Tooltip, Typography, darken, lighten, makeStyles, useTheme } from "@material-ui/core";
import clsx from "clsx";
import { useDrag, useDrop } from "react-dnd";
import TreeItem from "@material-ui/lab/TreeItem";
//#region src/treeMenu/BaseTreeMenuItem.jsx
const useStyles = makeStyles((theme) => ({
	root: {
		"&.Mui-selected > .MuiTreeItem-content": {
			backgroundColor: theme?.getThemeData()?.mode === "dark" ? theme.palette.grey[700] : theme.palette.action.selected,
			borderRight: `4px solid ${theme.palette.primary.main}`
		},
		"&.Mui-selected > .MuiTreeItem-content .MuiTreeItem-label": {
			backgroundColor: "transparent",
			paddingLeft: 0
		},
		"&.Mui-selected > .MuiTreeItem-content > .MuiCollapse-wrapperInner": { backgroundColor: theme?.getThemeData()?.mode !== "dark" && theme.palette.grey[50] },
		"& .MuiTreeItem-content .MuiTreeItem-iconContainer": { display: (props) => props.sidebarExpanded ? "flex" : "none" }
	},
	content: { backgroundColor: (props) => theme?.getThemeData()?.mode !== "dark" && props.conditionalIconName && props.conditionalIconColor ? lighten(props.conditionalIconColor, .92) : "" },
	labelRoot: {
		display: "flex",
		alignItems: "center",
		marginLeft: (props) => props.sidebarExpanded ? 0 : theme.spacing(1.5),
		width: "100%"
	},
	labelContainer: {
		display: (props) => !props.sidebarExpanded ? "none" : "",
		width: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? `calc(100% - ${theme.spacing(6.25)}px)` : `calc(100% - ${theme.spacing(7.75)}px)`
	},
	conditionalIconContainer: { display: "inline-flex" },
	labelText: {
		fontWeight: 500,
		lineHeight: "1rem",
		letterSpacing: .1
	},
	captionText: {
		marginLeft: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? theme.spacing(1) : "",
		fontSize: "0.65rem",
		fontWeight: 400,
		lineHeight: 1,
		letterSpacing: .4
	},
	labelOverflow: {
		whiteSpace: "nowrap",
		overflow: "hidden",
		textOverflow: "ellipsis"
	},
	group: {
		width: "100%",
		"& .MuiTreeItem-group": { marginLeft: 0 },
		"& .MuiTreeItem-content": {
			paddingLeft: (props) => props.sidebarExpanded ? (props.depth || 1) * theme.spacing(1) : 0,
			borderRight: (props) => props.showRightBorderColor ? `4px solid ${theme.palette.primary.main}` : "",
			borderBottom: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? `1px solid ${theme.palette.grey[200]}` : ""
		},
		"& .MuiTreeItem-content .MuiTreeItem-label": {
			paddingLeft: 0,
			width: (props) => props.sidebarExpanded && `calc(100% - ${theme.spacing(2.5)}px)`
		},
		"& .MuiTreeItem-content .MuiTreeItem-iconContainer span": { display: (props) => props.hideExpansion ? "none" : "" },
		"& .MuiCollapse-wrapperInner": { backgroundColor: (props) => theme?.getThemeData()?.mode !== "dark" && props.isSelectedNode ? theme.palette.grey[50] : "" }
	},
	iconContainer: {
		display: "flex",
		alignItems: "center",
		justifyContent: "center",
		borderRadius: 50,
		marginTop: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? theme.spacing(.25) : theme.spacing(.5),
		marginBottom: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? theme.spacing(.25) : theme.spacing(.5),
		marginRight: theme.spacing(1),
		width: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? theme.spacing(3) : theme.spacing(4),
		height: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? theme.spacing(3) : theme.spacing(4),
		border: (props) => props.iconColor ? `1px solid ${darken(props.iconColor, .1)}` : `1px solid ${theme.palette.secondary.main}`,
		backgroundColor: "#ffffff"
	}
}));
const BaseTreeMenuItem = (props) => {
	const { parentId, nodeId, iconName, iconType, conditionalIconName, conditionalIconType, conditionalIconColor, label, iconColor, onNodeSelect, isSelectedNode, subLabel, sidebarExpanded, isLastNode, loading, node, onDropNode, treeViewMode, menuIndex, aggregateThresholdId, ...other } = props;
	const classes = useStyles(props);
	const theme = useTheme();
	const [{ isDragging }, dragRef] = useDrag({
		type: "BaseTreeMenuItem",
		item: {
			...node,
			sourceNodeMenuIndex: menuIndex
		},
		collect: (monitor) => ({ isDragging: monitor.isDragging() })
	});
	const handleOnDrop = useCallback((sourceNode, monitor_0) => {
		if (!monitor_0.didDrop()) {
			if (onDropNode) {
				const { sourceNodeMenuIndex, ...other_0 } = sourceNode;
				onDropNode({ ...other_0 }, node, sourceNodeMenuIndex, menuIndex);
			}
		}
	}, [
		onDropNode,
		node,
		menuIndex
	]);
	const [{ canDrop, isOver }, dropRef] = useDrop(() => ({
		accept: ["BaseTreeMenuItem"],
		drop: (sourceNode_0, monitor_1) => {
			handleOnDrop(sourceNode_0, monitor_1);
		},
		canDrop: (sourceNode_1) => checkCanDrop(sourceNode_1),
		collect: (monitor_2) => ({
			isOver: monitor_2.isOver(),
			canDrop: !!monitor_2.canDrop()
		})
	}), [handleOnDrop]);
	const checkCanDrop = useCallback((sourceNode_2) => {
		if (sourceNode_2) {
			const onDropActions = node?.properties?.nodeActions?.filter((na) => na?.triggerType === NodeActionTriggerEnums.On_Node_Drop);
			if (!onDropActions) return false;
			return (onDropActions?.map((action) => action?.dragEntityName)).includes(sourceNode_2?.properties?.catalogReturnObject);
		}
	}, [node]);
	const handleOnLabelClick = useCallback((e) => {
		e.preventDefault();
		onNodeSelect(e, nodeId);
	}, [onNodeSelect, nodeId]);
	return /* @__PURE__ */ React.createElement(TreeItem, {
		className: classes.group,
		key: nodeId,
		nodeId,
		label: /* @__PURE__ */ React.createElement("div", { ref: dropRef }, /* @__PURE__ */ React.createElement(Tooltip, { title: sidebarExpanded ? "" : label }, /* @__PURE__ */ React.createElement("div", {
			ref: node?.properties?.isDraggable && dragRef || null,
			style: { opacity: isDragging ? .5 : 1 }
		}, loading ? /* @__PURE__ */ React.createElement(CircularProgress, { size: 12 }) : /* @__PURE__ */ React.createElement("div", {
			id: "udpRecord-BaseTreeMenuItem-" + label.replace(/\s+/g, ""),
			udprecordid: "udpRecord-BaseTreeMenuItem-" + label.replace(/\s+/g, ""),
			className: classes.labelRoot,
			style: { fontWeight: isSelectedNode ? "bold" : "" }
		}, iconName && /* @__PURE__ */ React.createElement("div", { className: classes.iconContainer }, /* @__PURE__ */ React.createElement(UnityFluentIcon, {
			size: treeViewMode === TreeViewModeEnums.Compact ? "small" : "medium",
			color: iconColor,
			type: iconType,
			icon: iconType === "unity" ? getUnityIconFromName(iconName) : getIconFromName(iconName),
			style: { color: iconColor ? darken(iconColor, .1) : theme.palette.secondary.main }
		})), /* @__PURE__ */ React.createElement("div", { className: classes.labelContainer }, /* @__PURE__ */ React.createElement(Typography, {
			variant: "subtitle2",
			className: clsx(classes.labelText, classes.labelOverflow)
		}, label, subLabel && treeViewMode === TreeViewModeEnums.Compact && /* @__PURE__ */ React.createElement(Typography, {
			variant: "caption",
			className: clsx(classes.captionText, classes.labelOverflow)
		}, subLabel)), subLabel && treeViewMode === TreeViewModeEnums.Classic && /* @__PURE__ */ React.createElement("div", { className: classes.labelOverflow }, /* @__PURE__ */ React.createElement(Typography, {
			variant: "caption",
			className: clsx(classes.captionText)
		}, subLabel))), node?.properties?.itemCount !== void 0 && node?.properties?.itemCount !== null && sidebarExpanded && /* @__PURE__ */ React.createElement(StatusChip, {
			label: String(node.properties.itemCount),
			useSmallChip: true
		}), /* @__PURE__ */ React.createElement(AggregateChip, { aggregateThresholdId }), conditionalIconName && sidebarExpanded && /* @__PURE__ */ React.createElement("div", { className: classes.conditionalIconContainer }, /* @__PURE__ */ React.createElement(UnityFluentIcon, {
			size: treeViewMode === TreeViewModeEnums.Compact ? "small" : "medium",
			color: conditionalIconColor,
			type: conditionalIconType,
			icon: conditionalIconType === "unity" ? getUnityIconFromName(conditionalIconName) : getIconFromName(conditionalIconName),
			style: { color: conditionalIconColor }
		})))))),
		onLabelClick: handleOnLabelClick,
		classes: {
			root: classes.root,
			content: classes.content
		},
		...other
	});
};
//#endregion
export { BaseTreeMenuItem };

//# sourceMappingURL=BaseTreeMenuItem.mjs.map