import {
  createContextMenu,
  parseContextMenuAsReactNode,
  parseContextMenuProperties,
} from '@felce/lowcode-utils';
import { engineConfig } from '@felce/lowcode-editor-core';
import { IPublicModelPluginContext, IPublicTypeContextMenuAction } from '@felce/lowcode-types';
import React, { useCallback } from 'react';

export function ContextMenu({
  children,
  menus,
  pluginContext,
}: {
  menus: IPublicTypeContextMenuAction[];
  children: React.ReactElement[] | React.ReactElement;
  pluginContext: IPublicModelPluginContext;
}): React.ReactElement<any, string | React.JSXElementConstructor<any>> {
  const handleContextMenu = useCallback(
    (event: React.MouseEvent) => {
      event.preventDefault();
      event.stopPropagation();

      let destroyFn: Function | undefined;
      const destroy = () => {
        destroyFn?.();
      };
      const children: React.ReactNode[] = parseContextMenuAsReactNode(
        parseContextMenuProperties(menus, {
          destroy,
          pluginContext,
        }),
        { pluginContext },
      );

      if (!children?.length) {
        return;
      }

      destroyFn = createContextMenu(children, { event });
    },
    [menus],
  );

  if (!engineConfig.get('enableContextMenu')) {
    return <>{children}</>;
  }

  if (!menus) {
    return <>{children}</>;
  }

  // 克隆 children 并添加 onContextMenu 事件处理器
  const childrenWithContextMenu = React.Children.map(children, (child) =>
    React.cloneElement(child, { onContextMenu: handleContextMenu }),
  );

  return <>{childrenWithContextMenu}</>;
}

ContextMenu.create = (
  pluginContext: IPublicModelPluginContext,
  menus: IPublicTypeContextMenuAction[],
  event: MouseEvent,
) => {
  event.preventDefault();
  event.stopPropagation();

  const children: React.ReactNode[] = parseContextMenuAsReactNode(
    parseContextMenuProperties(menus, {
      pluginContext,
    }),
    {
      pluginContext,
    },
  );

  if (!children?.length) {
    return;
  }

  return createContextMenu(children, {
    event,
  });
};
