import React from 'react'
import { cn } from '@/utils/cn'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '../ui/dropdown-menu'
import type { Viewport } from '../canvas'
import { LocalIcon } from '../ui/local-icon'

interface ImageActionsToolbarProps {
  element: {
    x: number
    y: number
    width: number
    height: number
    rotation?: number
  }
  viewport: Viewport
  onAction?: (actionId: 'download-group' | 'download-multi') => void
  readOnly?: boolean
}

const TOOLBAR_OFFSET_Y = -20

export const GroupActionsToolbar: React.FC<ImageActionsToolbarProps> = ({
  element,
  viewport,
  onAction,
}) => {
  const containerRef = React.useRef<HTMLDivElement>(null)
  const { x, y, width, height, rotation = 0 } = element
  const { x: vx, y: vy, scale: vs } = viewport

  const DOWNLOADAACIONS = [
    {
      id: 'download-group',
      icon: (
        <LocalIcon
          name='image-editor-image-download-compose'
          className='w-[16px] h-[16px]'
        />
      ),
      label: <span className='whitespace-nowrap'>拼图下载</span>,
    },
    // {
    //   id: 'download-multi',
    //   icon: (
    //     <LocalIcon name="image-editor-image-download-muti" className="w-[16px] h-[16px]" />
    //   ),
    //   label: (
    //     <span className='whitespace-nowrap'>
    //       批量下载
    //     </span>
    //   ),
    // },
  ]

  return (
    <div
      className='domino-toolbar absolute pointer-events-none z-[10]'
      style={{
        left: x * vs + vx,
        top: (y + TOOLBAR_OFFSET_Y) * vs + vy,
        width: width * vs,
        height: height * vs,
        transform: `rotate(${rotation}deg)`,
      }}
    >
      <div
        ref={containerRef}
        className={cn(
          'absolute left-1/2 flex items-center gap-[4px] bg-popover/90 backdrop-blur-md border border-border shadow-xl rounded-full p-[2px] pointer-events-auto',
          // readOnly && 'hidden' // We usually allow download in readOnly mode
        )}
        style={{
          bottom: '100%',
          marginBottom: '12px',
          transform: 'translate(-50%, 0)',
        }}
      >
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <div
              className={cn(
                'flex items-center justify-center w-[28px] h-[28px] rounded-[14px] cursor-pointer transition-colors flex-shrink-0',
                'text-foreground hover:bg-accent',
              )}
            >
              <LocalIcon
                name='download'
                className='w-[16px] h-[16px]'
              />
            </div>
          </DropdownMenuTrigger>
            <DropdownMenuContent side='bottom' align='end'>
              {DOWNLOADAACIONS.map(actions => (
                <DropdownMenuItem
                  key={actions.id}
                  onClick={() => {
                    switch (actions.id) {
                      case 'download-group':
                        onAction?.('download-group')
                        break
                      case 'download-multi':
                        onAction?.('download-multi')
                        break
                    }
                  }}
                  className='focus:bg-accent data-[highlighted]:bg-accent cursor-pointer'
                >
                  <div className='flex items-center gap-[8px] px-[4px] py-[2px] text-[14px] text-foreground'>
                    {actions.icon}
                    <span className='whitespace-nowrap'>{actions.label}</span>
                  </div>
                </DropdownMenuItem>
              ))}
            </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </div>
  )
}
