import React, { memo } from 'react'
import { getElementWorldRect, useDominoStore } from '../canvas'
import type {
  ImageElement,
  ArtboardElement,
  TextElement,
  SceneElement,
  PlaceholderElement,
  DominoStoreState,
} from '../canvas'
import { ImageActionsToolbar } from './image-actions-toolbar'
import { GroupActionsToolbar } from './image-group-toolbar'
import { TextToolbar } from './text-toolbar'

interface SelectionOverlayProps {
  elements: Record<string, SceneElement | PlaceholderElement>
  selectedIds: string[]
  selectionBounds: {
    left: number
    top: number
    width: number
    height: number
  } | null
  toolbarVisible: boolean
  onMatting: (element: ImageElement) => void
  onPartialRedraw: (element: ImageElement) => void
  onEditText: (element: ImageElement) => void
  onEditElements: (element: ImageElement) => void
  downloadImage: (url: string, fileName: string) => void
  downloadCompositeImage: () => void
  moveElementUp: (id: string) => void
  moveElementDown: (id: string) => void
  moveElementToTop: (id: string) => void
  moveElementToBottom: (id: string) => void
  readOnly?: boolean
}

const SelectionOverlay: React.FC<SelectionOverlayProps> = ({
  elements,
  selectedIds,
  selectionBounds,
  toolbarVisible,
  onMatting,
  onPartialRedraw,
  onEditText,
  onEditElements,
  downloadImage,
  downloadCompositeImage,
  moveElementUp,
  moveElementDown,
  moveElementToTop,
  moveElementToBottom,
  readOnly,
}) => {
  const viewport = useDominoStore((state: DominoStoreState) => state.viewport)

  if (!toolbarVisible || !elements || !selectedIds || selectedIds.length === 0)
    return null

  const rawElement = elements[selectedIds[0]] as
    | ImageElement
    | ArtboardElement
    | TextElement
    | undefined

  // 1. 单选情况
  if (selectedIds.length === 1 && rawElement) {
    const worldRect = getElementWorldRect(rawElement, elements)
    const selectedElement = {
      ...rawElement,
      x: worldRect.x,
      y: worldRect.y,
      rotation: worldRect.rotation,
    } as typeof rawElement
    if (selectedElement.type === 'image') {
      return (
        <ImageActionsToolbar
          element={selectedElement}
          viewport={viewport}
          readOnly={readOnly}
          onAction={(actionId: string) => {
            switch (actionId) {
              case 'download':
                downloadImage(
                  selectedElement.src,
                  `${selectedElement.fileName}`,
                )
                break
              case 'image-matting':
                onMatting(selectedElement)
                break
              case 'partial-redraw':
                onPartialRedraw(selectedElement)
                break
              case 'edit-text':
                onEditText(selectedElement)
                break
              case 'edit-elements':
                onEditElements(selectedElement)
                break
              case 'layer-up':
                moveElementUp(selectedElement.id)
                break
              case 'layer-down':
                moveElementDown(selectedElement.id)
                break
              case 'layer-top':
                moveElementToTop(selectedElement.id)
                break
              case 'layer-bottom':
                moveElementToBottom(selectedElement.id)
                break
            }
          }}
        />
      )
    }

    if (selectedElement.type === 'artboard') {
      return null
    }

    if (selectedElement.type === 'text') {
      return (
        <TextToolbar
          element={selectedElement as TextElement}
          viewport={viewport}
          readOnly={readOnly}
        />
      )
    }
  }

  // 2. 多选情况
  if (selectedIds.length > 1 && selectionBounds) {
    return (
      <GroupActionsToolbar
        element={{
          x: selectionBounds.left,
          y: selectionBounds.top,
          width: selectionBounds.width,
          height: selectionBounds.height,
          rotation: 0,
        }}
        viewport={viewport}
        readOnly={readOnly}
        onAction={actionId => {
          switch (actionId) {
            case 'download-group':
              downloadCompositeImage()
              break
            case 'download-multi': {
              const selectElements = selectedIds
                .map(id => elements[id])
                .filter((el): el is ImageElement => el?.type === 'image')
              selectElements.forEach(el => {
                downloadImage(el.src, `${el.fileName}`)
              })
              break
            }
          }
        }}
      />
    )
  }

  return null
}

export default memo(SelectionOverlay)
