import { getText } from "../../locales/index.js";
import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import Button$1 from "../button/index.js";
import icon_default from "../icon/index.js";
import PisellTags from "../pisellTags/index.js";
import PisellEmpty from "../pisellEmpty/index.js";
import pisellDropSort_default from "../pisellDropSort/index.js";
import { formatTree } from "./utils.js";
import React, { useCallback, useMemo } from "react";
import { isFunction } from "@pisell/utils";
import { Dropdown } from "antd";
import classNames from "classnames";
import "./PisellNavigationMenu.less";
//#region src/components/pisellNavigationMenu/PisellNavigationMenu.tsx
const PisellNavigationMenu = ({ value = [], allowDrag = true, allowDelete = true, allowAddChild = true, allowAddRoot = true, allowIsShow = true, disabled = false, spacing = 8, maxLevel = 3, style, className, onChange, onAddSubMenu, onAddPage, onEdit, onDelete, onIsShow, __designMode, title, rightContent: propsRightContent, getItemStyle: propsGetItemStyle, canDrop, indentationWidth = 24, hideDescription, showActionOnHover, showTitleTags }) => {
	const convertToNavigationItems = (items) => {
		return items.map((item) => ({
			id: String(item.id),
			title: String(item.title || ""),
			path: String(item.path || "/"),
			collapsed: item.collapsed,
			children: item.children ? convertToNavigationItems(item.children) : []
		}));
	};
	useMemo(() => {
		return [{
			label: getText("pisell-lowcode-navigation-menu-add-sub-menu"),
			key: "add-child"
		}, {
			label: getText("pisell-lowcode-navigation-menu-add-page"),
			key: "add-page"
		}];
	}, []);
	const handleClick = useCallback((key, item) => {
		if (key === "add-child") onAddSubMenu === null || onAddSubMenu === void 0 || onAddSubMenu(item);
		else if (key === "add-page") onAddPage === null || onAddPage === void 0 || onAddPage(item);
	}, []);
	const tagTextMap = useMemo(() => {
		return {
			base: {
				text: getText("pisell-lowcode-navigation-menu-tag-base"),
				color: "#7f56d9"
			},
			proCode: {
				text: getText("pisell-lowcode-navigation-menu-tag-proCode"),
				color: "#1677ff"
			},
			pisellV1: {
				text: getText("pisell-lowcode-navigation-menu-tag-pisell1"),
				color: "#ee837a"
			},
			dynamicRoute: {
				text: getText("pisell-lowcode-navigation-menu-tag-dynamic-route"),
				color: "#ffc53d"
			},
			group: {
				text: getText("pisell-lowcode-navigation-menu-tag-group"),
				color: "#7f56d9"
			},
			subMenu: {
				text: getText("pisell-lowcode-navigation-menu-tag-sub-menu"),
				color: "#067647"
			},
			custom: {
				text: getText("pisell-lowcode-navigation-menu-tag-custom"),
				color: "#B54708"
			}
		};
	}, []);
	const renderMenuItem = useCallback((itemProps) => {
		var _tagTextMap$group, _tagTextMap$group2, _tagTextMap$subMenu, _tagTextMap$subMenu2, _tagTextMap$custom, _tagTextMap$custom2, _tagTextMap$item$sour, _tagTextMap$item$sour2;
		const { item } = itemProps;
		const { allowEdit = true, allowDelete = true, allowAddChild = true, allowAddSubmenu = true, allowAddPage = true, allowIsShow = true } = item;
		const isShowAddButton = item.isGroup && allowAddChild && (allowAddSubmenu || allowAddPage);
		return /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode-navigation-menu-item" }, /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode-navigation-menu-item-content" }, item.icon && /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode-navigation-menu-item-content-icon" }, /* @__PURE__ */ React.createElement(icon_default, { type: item.icon })), /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode-navigation-menu-item-content-text" }, /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode-navigation-menu-item-title" }, item.title, showTitleTags && /* @__PURE__ */ React.createElement(React.Fragment, null, item.isGroup && item.is_top && /* @__PURE__ */ React.createElement(PisellTags, {
			type: "pill_color",
			color: (_tagTextMap$group = tagTextMap["group"]) === null || _tagTextMap$group === void 0 ? void 0 : _tagTextMap$group.color
		}, ((_tagTextMap$group2 = tagTextMap["group"]) === null || _tagTextMap$group2 === void 0 ? void 0 : _tagTextMap$group2.text) || ""), item.isGroup && !item.is_top && /* @__PURE__ */ React.createElement(PisellTags, {
			type: "pill_color",
			color: (_tagTextMap$subMenu = tagTextMap["subMenu"]) === null || _tagTextMap$subMenu === void 0 ? void 0 : _tagTextMap$subMenu.color
		}, ((_tagTextMap$subMenu2 = tagTextMap["subMenu"]) === null || _tagTextMap$subMenu2 === void 0 ? void 0 : _tagTextMap$subMenu2.text) || ""), item.isCustom && /* @__PURE__ */ React.createElement(PisellTags, {
			type: "pill_color",
			color: (_tagTextMap$custom = tagTextMap["custom"]) === null || _tagTextMap$custom === void 0 ? void 0 : _tagTextMap$custom.color
		}, ((_tagTextMap$custom2 = tagTextMap["custom"]) === null || _tagTextMap$custom2 === void 0 ? void 0 : _tagTextMap$custom2.text) || ""))), hideDescription ? null : /* @__PURE__ */ React.createElement("div", {
			className: "pisell-lowcode-navigation-menu-item-description",
			style: { display: hideDescription ? "none" : "flex" }
		}, item.description, item.source && /* @__PURE__ */ React.createElement(PisellTags, {
			type: "pill_color",
			color: (_tagTextMap$item$sour = tagTextMap[item.source]) === null || _tagTextMap$item$sour === void 0 ? void 0 : _tagTextMap$item$sour.color
		}, ((_tagTextMap$item$sour2 = tagTextMap[item.source]) === null || _tagTextMap$item$sour2 === void 0 ? void 0 : _tagTextMap$item$sour2.text) || ""), !item.isGroup && item.version && /* @__PURE__ */ React.createElement(PisellTags, {
			type: "pill_color",
			color: "success"
		}, "v", item.version)))), /* @__PURE__ */ React.createElement("div", { className: classNames("pisell-lowcode-navigation-menu-item-action-wrap", { "pisell-lowcode-navigation-menu-item-action-wrap-hover": showActionOnHover }) }, allowIsShow && /* @__PURE__ */ React.createElement(Button$1, {
			type: "text",
			onClick: () => onIsShow === null || onIsShow === void 0 ? void 0 : onIsShow(item),
			className: "pisell-lowcode-navigation-menu-item-action-button",
			icon: /* @__PURE__ */ React.createElement(icon_default, {
				type: item.is_show === false ? "pisell2-eye-off" : "pisell2-eye",
				className: "pisell-lowcode-navigation-menu-item-action-button-icon"
			})
		}), allowEdit && /* @__PURE__ */ React.createElement(Button$1, {
			type: "text",
			onClick: () => onEdit === null || onEdit === void 0 ? void 0 : onEdit(item),
			className: "pisell-lowcode-navigation-menu-item-action-button",
			icon: /* @__PURE__ */ React.createElement(icon_default, {
				type: "pisell2-edit-05",
				className: "pisell-lowcode-navigation-menu-item-action-button-icon"
			})
		}), isShowAddButton && /* @__PURE__ */ React.createElement(Dropdown, {
			getPopupContainer: (triggerNode) => triggerNode,
			menu: { items: [allowAddSubmenu && {
				key: "add-child",
				label: getText("pisell-lowcode-navigation-menu-add-sub-menu"),
				onClick: () => handleClick("add-child", item)
			}, allowAddPage && {
				key: "add-page",
				label: getText("pisell-lowcode-navigation-menu-add-page"),
				onClick: () => handleClick("add-page", item)
			}].filter(Boolean) }
		}, /* @__PURE__ */ React.createElement(Button$1, {
			type: "text",
			className: "pisell-lowcode-navigation-menu-item-action-button",
			icon: /* @__PURE__ */ React.createElement(icon_default, {
				type: "pisell2-plus",
				className: "pisell-lowcode-navigation-menu-item-action-button-icon"
			})
		})), allowDelete && /* @__PURE__ */ React.createElement(Button$1, {
			type: "text",
			onClick: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(item),
			className: "pisell-lowcode-navigation-menu-item-action-button",
			icon: /* @__PURE__ */ React.createElement(icon_default, {
				type: "pisell2-trash-01",
				className: "pisell-lowcode-navigation-menu-item-action-button-icon"
			})
		})));
	}, [value, onChange]);
	const handleChange = useCallback((items) => {
		onChange === null || onChange === void 0 || onChange(convertToNavigationItems(items));
	}, [onChange]);
	const leftContent = useMemo(() => {
		return /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode-navigation-menu-left-content" }, title);
	}, [title]);
	const rightContent = useMemo(() => {
		if (propsRightContent) return propsRightContent;
		return /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode-navigation-menu-right-content" }, /* @__PURE__ */ React.createElement(Button$1, {
			size: "large",
			type: "primary",
			icon: /* @__PURE__ */ React.createElement(icon_default, { type: "pisell2-plus" }),
			onClick: () => onAddSubMenu === null || onAddSubMenu === void 0 ? void 0 : onAddSubMenu()
		}, getText("pisell-lowcode-navigation-menu-add-sub-menu")), /* @__PURE__ */ React.createElement(Button$1, {
			size: "large",
			icon: /* @__PURE__ */ React.createElement(icon_default, { type: "pisell2-plus" }),
			onClick: () => onAddPage === null || onAddPage === void 0 ? void 0 : onAddPage()
		}, getText("pisell-lowcode-navigation-menu-add-page")));
	}, [propsRightContent]);
	const formatValue = useMemo(() => {
		return formatTree(value, (item) => _objectSpread2(_objectSpread2({}, item), {}, { disabledDrop: !item.isGroup }));
	}, [value]);
	const getItemStyle = useCallback((itemProps) => {
		const { item } = itemProps;
		if (isFunction(propsGetItemStyle)) return (propsGetItemStyle === null || propsGetItemStyle === void 0 ? void 0 : propsGetItemStyle(item)) || {};
		return { backgroundColor: item.isGroup ? "#fff" : "var(--Gray-50, #F9FAFB)" };
	}, [propsGetItemStyle]);
	return /* @__PURE__ */ React.createElement(pisellDropSort_default, {
		indentationWidth,
		value: formatValue,
		allowDrag,
		allowDelete,
		allowAddChild,
		allowAddRoot,
		allowIsShow,
		disabled,
		spacing,
		maxLevel,
		style,
		className,
		onChange: handleChange,
		renderItem: renderMenuItem,
		isCustomAction: true,
		__designMode,
		leftContent,
		rightContent,
		getItemStyle,
		emptyContent: /* @__PURE__ */ React.createElement(PisellEmpty, {
			maxWidth: 400,
			description: getText("pisell-lowcode-navigation-menu-add-page-tip")
		}),
		canDrop
	});
};
//#endregion
export { PisellNavigationMenu as default };
