import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import react, { memo, useMemo } from "react";
import { uid } from "@tachybase/schema";
import classnames from "classnames";
import { Icon } from "../../../icon/index.mjs";
import { useCompile } from "../../../schema-component/index.mjs";
import { useSchemaInitializerItem } from "../context/index.mjs";
import { useAriaAttributeOfMenuItem, useSchemaInitializerMenuItems } from "../hooks/index.mjs";
import { SchemaInitializerMenu } from "./SchemaInitializerSubMenu.mjs";
import { useSchemaInitializerStyles } from "./style.mjs";
const SchemaInitializerItem = /*#__PURE__*/ memo(/*#__PURE__*/ react.forwardRef((props, ref)=>{
    const { style, name = uid(), applyMenuStyle = true, className, items, icon, title, onClick, children } = props;
    const compile = useCompile();
    const childrenItems = useSchemaInitializerMenuItems(items, name, onClick);
    const { componentCls, hashId } = useSchemaInitializerStyles();
    const { attribute } = useAriaAttributeOfMenuItem();
    const menuItems = useMemo(()=>{
        if (!(items && items.length > 0)) return;
        return [
            {
                key: name,
                style: style,
                className: className,
                label: children || compile(title),
                onClick: (info)=>{
                    if (info.key !== name) return;
                    null == onClick || onClick({
                        ...info,
                        item: props
                    });
                },
                icon: 'string' == typeof icon ? /*#__PURE__*/ jsx(Icon, {
                    type: icon
                }) : icon,
                children: childrenItems
            }
        ];
    }, [
        name,
        style,
        className,
        children,
        title,
        onClick,
        icon,
        childrenItems
    ]);
    if (items && items.length > 0) return /*#__PURE__*/ jsx(SchemaInitializerMenu, {
        items: menuItems
    });
    return /*#__PURE__*/ jsx("div", {
        ref: ref,
        onClick: (event)=>{
            event.stopPropagation();
            null == onClick || onClick({
                event,
                item: props
            });
        },
        children: /*#__PURE__*/ jsx("div", {
            ...attribute,
            className: classnames({
                ["".concat(componentCls, "-menu-item")]: applyMenuStyle
            }, className),
            style: style,
            children: children || /*#__PURE__*/ jsxs(Fragment, {
                children: [
                    icon && 'string' == typeof icon ? /*#__PURE__*/ jsx(Icon, {
                        type: icon
                    }) : icon,
                    /*#__PURE__*/ jsx("span", {
                        className: classnames({
                            ["".concat(hashId, " ").concat(componentCls, "-item-content")]: icon
                        }),
                        children: compile(title)
                    })
                ]
            })
        })
    });
}));
SchemaInitializerItem.displayName = 'SchemaInitializerItem';
const SchemaInitializerItemInternal = ()=>{
    const itemConfig = useSchemaInitializerItem();
    return /*#__PURE__*/ jsx(SchemaInitializerItem, {
        ...itemConfig
    });
};
export { SchemaInitializerItem, SchemaInitializerItemInternal };
