import { TreeViewModeEnums } from "../enums/unitySystemEnums.mjs";
import { FluentIcon } from "../utilities/iconLibrary/FluentIcon.mjs";
import { findAllParentIds, getNodeIdForRightBorder, searchTree } from "../utilities/tree/TreeUtilities.mjs";
import { BaseTreeMenuItem } from "./BaseTreeMenuItem.mjs";
import React, { useCallback, useEffect, useRef, useState } from "react";
import { CircularProgress, Typography, lighten, makeStyles, useTheme } from "@material-ui/core";
import { CaretDownSolid8Icon, CaretUpSolid8Icon } from "@fluentui/react-icons";
import { cloneDeep } from "lodash-es";
import TreeView from "@material-ui/lab/TreeView";
//#region src/treeMenu/BaseTreeMenu.jsx
const useStyles = makeStyles((theme) => ({
	root: {
		marginBottom: theme.spacing(1.75),
		borderTop: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? `1px solid ${theme.palette.grey[200]}` : ""
	},
	noChildrenContainer: { borderBottom: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? `1px solid ${theme.palette.grey[200]}` : "" }
}));
const BaseTreeMenu = (props) => {
	const { menuItems, onSelectNode, onDropNode, menuIndex, selectedNodeId, selectedNodeParentId, sidebarExpanded, treeViewMode, childrenKey = "children" } = props;
	const [expanded, setExpanded] = useState(null);
	const [isCurrentActiveTree, setIsCurrentActiveTree] = useState(false);
	const [selectedNodeIsHidden, setSelectedNodeIsHidden] = useState(false);
	const [tree, setTree] = useState(menuItems);
	const theme = useTheme();
	const classes = useStyles(props);
	const firstRender = useRef(true);
	const handleSelectedNode = useCallback((e, value) => {
		const selectedNode = searchTree(tree, value);
		if (onSelectNode) {
			onSelectNode(selectedNode, menuIndex);
			setSelectedNodeIsHidden(false);
		}
	}, [
		tree,
		menuIndex,
		onSelectNode
	]);
	const renderTree = useCallback((node, depth = 1) => {
		let label = node.properties?.nodeLabel || node.properties?.name;
		let subLabel = node.properties?.nodeSubLabel;
		let iconName = node.properties?.defaultIcon?.name;
		let iconType = node.properties?.defaultIcon?.type;
		let conditionalIconName = node.properties?.conditionalIconName || "";
		let conditionalIconType = node.properties?.conditionalIconName ? node.properties.conditionalIconType : "";
		let conditionalIconColor = node.properties?.conditionalIconName ? node.properties?.conditionalIconColor : "";
		let nodeId = node.id;
		let iconColor = node.properties?.conditionalIconName ? node.properties?.conditionalIconColor : node.properties?.defaultIcon?.color?.hex;
		let aggregateThresholdId = node.properties?.aggregateThresholdId || "";
		if (node.isGroupNode) {
			label = node.properties?.label;
			subLabel = node.properties?.subLabel;
			iconName = node.properties?.icon?.name;
			iconType = node.properties?.icon?.type;
			iconColor = node.properties?.icon?.color?.hex;
		}
		return /* @__PURE__ */ React.createElement(BaseTreeMenuItem, {
			key: nodeId,
			nodeId,
			label,
			subLabel,
			iconName,
			iconType,
			conditionalIconName,
			conditionalIconType,
			conditionalIconColor,
			parentId: node.parentId,
			iconColor,
			onNodeSelect: handleSelectedNode,
			selectedNodeId,
			isSelectedNode: selectedNodeId === node.id,
			showRightBorderColor: selectedNodeIsHidden && isCurrentActiveTree && getNodeIdForRightBorder(expanded, tree, selectedNodeParentId) === node.id,
			isCurrentActiveTree,
			sidebarExpanded,
			depth,
			hideExpansion: !!!node[childrenKey]?.length,
			node,
			onDropNode,
			treeViewMode,
			menuIndex,
			aggregateThresholdId
		}, node.properties?.lazyLoad && !!!node[childrenKey]?.length && !node.completedLoadingChildren && /* @__PURE__ */ React.createElement(CircularProgress, {
			size: 12,
			style: { marginLeft: (depth || 1) * theme.spacing(1) }
		}), node.properties?.lazyLoad && !!!node[childrenKey]?.length && node.completedLoadingChildren && sidebarExpanded && !node.errorRetrievingChildren && /* @__PURE__ */ React.createElement("div", { className: classes.noChildrenContainer }, /* @__PURE__ */ React.createElement(Typography, {
			variant: "caption",
			style: {
				marginLeft: (depth || 1) * theme.spacing(3),
				fontWeight: 400
			}
		}, "No Children")), node.properties?.lazyLoad && node.completedLoadingChildren && sidebarExpanded && node.errorRetrievingChildren && /* @__PURE__ */ React.createElement("div", { className: classes.noChildrenContainer }, /* @__PURE__ */ React.createElement(Typography, {
			variant: "caption",
			style: {
				marginLeft: (depth || 1) * theme.spacing(3),
				fontWeight: 400
			}
		}, `Error Retrieving ${!!node[childrenKey]?.length ? `Additional ` : ""}Children`)), Array.isArray(node[childrenKey]) ? node[childrenKey].map((n, i) => renderTree(n, depth + 1)) : null);
	}, [
		handleSelectedNode,
		selectedNodeId,
		selectedNodeIsHidden,
		isCurrentActiveTree,
		sidebarExpanded,
		expanded,
		tree,
		selectedNodeParentId,
		theme,
		classes,
		onDropNode,
		treeViewMode,
		menuIndex,
		childrenKey
	]);
	const handleNodeExpansion = useCallback(async (evt, nodeIds) => {
		const treeCopy = cloneDeep(tree);
		setExpanded(nodeIds);
		const allParentNodeIds = findAllParentIds(treeCopy, searchTree(treeCopy, selectedNodeParentId), selectedNodeParentId ? [selectedNodeParentId] : []);
		const selectedNodeShown = allParentNodeIds.every((id) => nodeIds.includes(id));
		if (isCurrentActiveTree && allParentNodeIds.length && !selectedNodeShown) setSelectedNodeIsHidden(true);
		else setSelectedNodeIsHidden(false);
	}, [
		isCurrentActiveTree,
		tree,
		selectedNodeParentId
	]);
	const getExpandedRecursively = useCallback((tree_0) => {
		if (!tree_0) return [];
		return tree_0.reduce((expandedIds, item) => {
			if (item?.isExpanded) expandedIds.push(item.id);
			if (item && item[childrenKey]?.length) expandedIds = expandedIds.concat(getExpandedRecursively(item[childrenKey]));
			return expandedIds;
		}, []);
	}, [childrenKey]);
	useEffect(() => {
		setTree(menuItems);
	}, [menuItems]);
	useEffect(() => {
		if (!tree) return;
		if (firstRender.current) {
			let expanded_0 = [];
			if (tree?.isExpanded) expanded_0.push(tree.id);
			expanded_0 = expanded_0.concat(getExpandedRecursively(tree[childrenKey]));
			setExpanded(expanded_0);
			firstRender.current = false;
		}
	}, [
		getExpandedRecursively,
		tree,
		childrenKey
	]);
	useEffect(() => {
		if (!!searchTree(tree, selectedNodeId)) setIsCurrentActiveTree(true);
		else setIsCurrentActiveTree(false);
	}, [tree, selectedNodeId]);
	const treeSelectedId = isCurrentActiveTree && selectedNodeId != null ? String(selectedNodeId) : null;
	if (!expanded) return null;
	return /* @__PURE__ */ React.createElement(TreeView, {
		key: tree,
		className: classes.root,
		defaultCollapseIcon: /* @__PURE__ */ React.createElement(FluentIcon, {
			size: "small",
			component: CaretUpSolid8Icon,
			style: {
				color: lighten(theme.palette.primary.main, .5),
				width: theme.spacing(1.5),
				height: theme.spacing(1.5)
			}
		}),
		expanded: expanded || [],
		onNodeToggle: handleNodeExpansion,
		defaultExpandIcon: /* @__PURE__ */ React.createElement(FluentIcon, {
			size: "small",
			component: CaretDownSolid8Icon,
			style: {
				color: lighten(theme.palette.primary.main, .5),
				width: theme.spacing(1.5),
				height: theme.spacing(1.5)
			}
		}),
		selected: treeSelectedId
	}, tree && renderTree(tree));
};
//#endregion
export { BaseTreeMenu };

//# sourceMappingURL=BaseTreeMenu.mjs.map