import { memo } from 'react'
import { cn } from '@/utils/cn'
import { Icon } from '../ui/icon'
import type { SceneElement } from '../canvas'

export interface ElementMetadataProps {
  element: SceneElement
  onEditDimension?: (id: string) => void
}

export const ElementMetadata = memo(
  ({ element, onEditDimension }: ElementMetadataProps) => {
    const isImage = element.type === 'image'
    const isArtboard = element.type === 'artboard'

    if (!isImage && !isArtboard) return null

    return (
      <div className='flex w-full items-center justify-between whitespace-nowrap font-medium text-[var(--editor-text-muted)]'>
        <div className='domino-element-file-name flex items-center gap-[4px] min-w-0 pointer-events-auto'>
          {isArtboard && (
            <>
              <Icon
                icon='artboard-gray'
                className='flex-shrink-0'
                style={{ width: 12, height: 12 }}
              />
              <span className='truncate'>{element.name || '画板'}</span>
            </>
          )}
          {isImage && <span className='truncate'>{element.fileName}</span>}
        </div>
        <div
          onPointerDown={e => e.stopPropagation()}
          onClick={e => {
            if (isArtboard) {
              e.stopPropagation()
              onEditDimension?.(element.id)
            }
          }}
          className={cn(
            'domino-element-dimension opacity-60 flex-shrink-0 pointer-events-auto',
            isArtboard && 'hover:text-primary cursor-pointer transition-colors',
          )}
        >
          {isImage && (
            <>
              {element.originalWidth}*{element.originalHeight}
            </>
          )}
          {isArtboard && (
            <>
              {element.width.toFixed(0)}*{element.height.toFixed(0)}
            </>
          )}
        </div>
      </div>
    )
  },
)
