import type { Node } from './types'
import {
  ContextMenuContent,
} from '@langgenius/dify-ui/context-menu'
import useNodes from '@/app/components/workflow/store/workflow/use-nodes'
import { NodeActionsContextMenuContent } from './node-actions-menu/context-menu-content'
import { NODE_ACTIONS_MENU_WIDTH_CLASS_NAME } from './node-actions-menu/shared'
import { useStore } from './store'

export function NodeContextmenu({
  onClose,
}: {
  onClose: () => void
}) {
  const nodes = useNodes()
  const contextMenuTarget = useStore(s => s.contextMenuTarget)
  const nodeId = contextMenuTarget?.type === 'node' ? contextMenuTarget.nodeId : undefined
  const currentNode = nodeId ? nodes.find(node => node.id === nodeId) as Node | undefined : undefined

  if (!nodeId || !currentNode)
    return null

  return (
    <ContextMenuContent
      popupClassName={NODE_ACTIONS_MENU_WIDTH_CLASS_NAME}
      sideOffset={4}
    >
      <NodeActionsContextMenuContent
        id={currentNode.id}
        data={currentNode.data}
        onClose={onClose}
        showHelpLink
      />
    </ContextMenuContent>
  )
}