import React, { useMemo } from "react";
import { Divider, Menu } from "antd";
import { CheckOutlined } from "@ant-design/icons";
import { useControllableValue } from "ahooks";
import "./index.less";
//#region src/components/sort/components/InlineMenu/index.tsx
const prefix = "pisell-lowcode-";
/**
* 内嵌展示的菜单 只支持两级
* @param props
* @constructor
*/
const InlineMenu = (props) => {
	const { items } = props;
	const [state, setState] = useControllableValue(props);
	const value = useMemo(() => {
		return (state || "").split(":");
	}, [state]);
	const childItems = useMemo(() => {
		var _items$find;
		return ((_items$find = items.find((item) => {
			var _item$key;
			return ((_item$key = item.key) === null || _item$key === void 0 ? void 0 : _item$key.toString()) === (value === null || value === void 0 ? void 0 : value[0]);
		})) === null || _items$find === void 0 ? void 0 : _items$find.children) || items[0].children;
	}, [value, items]);
	const handleParentClick = (detail) => {
		var _detail$key2;
		const children = items.find((item) => {
			var _item$key2, _detail$key;
			return ((_item$key2 = item.key) === null || _item$key2 === void 0 ? void 0 : _item$key2.toString()) === ((_detail$key = detail.key) === null || _detail$key === void 0 ? void 0 : _detail$key.toString());
		});
		const defaultKey = children.children[0].key;
		setState(((_detail$key2 = detail.key) === null || _detail$key2 === void 0 ? void 0 : _detail$key2.toString()) === value[0] ? "" : defaultKey, {
			key: defaultKey,
			item: children.children[0],
			keyPath: [defaultKey, detail.key]
		});
	};
	const handleChildrenClick = (detail) => {
		var _detail$key3;
		const parent = items.find((item) => item.children.some((c) => c.key === detail.key));
		setState((_detail$key3 = detail.key) === null || _detail$key3 === void 0 ? void 0 : _detail$key3.toString(), {
			key: detail.key,
			item: detail.item,
			keyPath: [detail.key, parent.key]
		});
	};
	return /* @__PURE__ */ React.createElement("div", { className: `${prefix}inline-menu-wrap` }, /* @__PURE__ */ React.createElement(Menu, {
		items: items.map((item) => ({
			key: item.key,
			label: /* @__PURE__ */ React.createElement("span", { className: `${prefix}menu-item-label-wrap` }, /* @__PURE__ */ React.createElement("span", { className: `${prefix}menu-item-label` }, item.label), item.key === (value === null || value === void 0 ? void 0 : value[0]) && /* @__PURE__ */ React.createElement(CheckOutlined, null))
		})),
		onClick: handleParentClick,
		selectedKeys: [value === null || value === void 0 ? void 0 : value[0]]
	}), /* @__PURE__ */ React.createElement(Divider, { style: { margin: "6px 0" } }), /* @__PURE__ */ React.createElement(Menu, {
		className: `${prefix}sort-sub-menu-popup-wrap`,
		items: childItems,
		onClick: handleChildrenClick,
		selectedKeys: [state]
	}));
};
//#endregion
export { InlineMenu as default };
