import React from 'react'
import { createPortal } from 'react-dom'

import type { ContextMenuProps } from '../types'

// Компонент контекстного меню для отмены поставки
export const ContextMenu = React.memo(function ContextMenu({
  isOpen,
  position,
  onClose,
  onCancel,
}: ContextMenuProps) {
  if (!isOpen) return null

  const menuContent = (
    <>
      {/* Overlay для закрытия меню */}
      <div className="fixed inset-0" style={{ zIndex: 9998 }} onClick={onClose} />

      {/* Контекстное меню */}
      <div
        className="fixed bg-gray-900 border border-white/20 rounded-lg shadow-xl py-1 min-w-[160px]"
        style={{
          left: position.x,
          top: position.y,
          zIndex: 9999,
          backgroundColor: 'rgb(17, 24, 39)',
          borderColor: 'rgba(255, 255, 255, 0.2)',
        }}
      >
        <button
          onClick={(e) => {
            e.stopPropagation()
            onCancel()
          }}
          className="w-full px-3 py-2 text-left text-red-400 hover:bg-red-500/20 hover:text-red-300 text-sm transition-colors"
        >
          Отменить поставку
        </button>
      </div>
    </>
  )

  // Используем портал для рендера в body
  return typeof window !== 'undefined' ? createPortal(menuContent, document.body) : null
})