import React, { memo } from 'react'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '../ui/dropdown-menu'
import { cn } from '@/utils/cn'
import { IconButton } from '../ui/icon'
import { useDominoInstance } from '../canvas'
import { useZoomActions } from '../../hooks/use-zoom-actions'

const ZOOM_LEVELS = [1]

export interface TopBarProps {
  className?: string
  rootRef: React.RefObject<HTMLDivElement | null>
  onBack?: (e: React.MouseEvent) => void
  onClose?: () => void
  expand?: boolean
  onToggleExpand?: (e: React.MouseEvent) => void
}

function TopBar(props: TopBarProps) {
  const { className, rootRef, onBack, onClose, expand, onToggleExpand } = props

  const { zoomToFit } = useDominoInstance()
  const { handleZoom, stepZoom, scale } = useZoomActions(rootRef)

  return (
    <div
      className={cn(
        'domi-board-top-bar',
        'flex justify-between absolute top-0 left-0 w-full px-[16px] py-[14px]',
        'overflow-visible pointer-events-none [&>*]:pointer-events-auto',
        className,
      )}
    >
      <div className='flex items-center gap-[8px]'>
        {/* {onBack && (
          <IconButton
            icon='back'
            className='w-[32px] h-[32px] bg-[#fff]/90 border-[0.5px] border-[#E1E1E5]/80 rounded-full !hover:bg-[#f8f8fa]'
            onClick={onBack}
          />
        )} */}
      </div>

      <div className='flex justify-between gap-[8px] text-[var(--editor-text)]'>
        {/* Zoom Controls */}
        <div className='editor-floating-panel-soft flex items-center rounded-[100px] p-[4px]'>
          <IconButton
            icon='board-zoom-out'
            className='rounded-full'
            onClick={() => stepZoom(-1)}
          />
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <div className='editor-toolbar-chip flex h-[24px] min-w-[50px] cursor-pointer items-center justify-center rounded-[16px] px-[10px] text-[14px] transition-opacity'>
                {Math.round(scale * 100)}%
              </div>
            </DropdownMenuTrigger>
            <DropdownMenuContent side='bottom' align='center'>
              {ZOOM_LEVELS.map(z => (
                <DropdownMenuItem
                  key={z.toFixed(2)}
                  onClick={() => handleZoom(z)}
                  className='justify-center focus:bg-accent cursor-pointer'
                >
                  <div className='flex items-center gap-[8px] px-[4px] py-[2px]'>
                    <span className='text-[14px] text-foreground'>
                      缩放到 {Math.round(z * 100)}%
                    </span>
                  </div>
                </DropdownMenuItem>
              ))}
              <DropdownMenuItem
                onClick={() => zoomToFit()}
                className='justify-center focus:bg-accent cursor-pointer'
              >
                <div className='flex items-center gap-[8px] px-[4px] py-[2px]'>
                  <span className='text-[14px] text-foreground'>显示全部</span>
                </div>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
          <IconButton
            icon='board-zoom-in'
            className='rounded-full'
            onClick={() => stepZoom(1)}
          />
        </div>

        <div className='editor-floating-panel-soft flex h-[32px] items-center gap-[5px] rounded-[100px] p-[4px] empty:hidden'>
          {onToggleExpand && (
            <IconButton
              icon={expand ? 'zoom-in' : 'zoom-out'}
              className='rounded-full'
              onClick={onToggleExpand}
            />
          )}
          {/* {onClose && (
            <IconButton
              icon='board-close'
              className='rounded-full'
              onClick={onClose}
            />
          )} */}
        </div>
      </div>
    </div>
  )
}

export default memo(TopBar)
