import { Image, Text, View } from '@tarojs/components'
import { PublishIcon } from '@/features/publish/components/PublishPrimitives'
import type { MediaAsset } from '@/types/domain'
import './index.scss'

interface MediaGridProps {
  media: MediaAsset[]
  onAdd: () => void
  onRemove: (id: string) => void
}

const fillClasses = ['publish-media-grid__slot--one', 'publish-media-grid__slot--two', 'publish-media-grid__slot--three']

export function MediaGrid({ media, onAdd, onRemove }: MediaGridProps) {
  return (
    <View className='publish-media-grid'>
      {media.map((item, index) => (
        <View key={item.id} className={`publish-media-grid__slot ${item.url ? '' : fillClasses[index % fillClasses.length]}`}>
          {item.url && !item.url.startsWith('cloud://') ? (
            <Image className='publish-media-grid__img' src={item.url} mode='aspectFill' />
          ) : null}
          <Text className='publish-media-grid__cover'>{index + 1}/{media.length}</Text>
          <View className='publish-media-grid__remove' onClick={() => onRemove(item.id)}>
            <PublishIcon name='close' size={12} />
          </View>
        </View>
      ))}
      {media.length < 9 ? (
        <View className='publish-media-grid__slot publish-media-grid__slot--add' onClick={onAdd}>
          <View className='publish-media-grid__add-icon'>
            <PublishIcon name='plus' size={18} />
          </View>
          <Text className='publish-media-grid__add-label'>添加图片</Text>
        </View>
      ) : null}
    </View>
  )
}

export default MediaGrid
