import Taro from '@tarojs/taro'
import { Image, Text, View } from '@tarojs/components'
import Icon from '@/components/ui/Icon'
import type { Pet } from '@/types/domain'
import './index.scss'

interface PetShelfProps {
  pets: Pet[]
}

const MAX_PETS = 10

function goEdit(petId?: string) {
  const query = petId ? `?petId=${petId}` : ''
  Taro.navigateTo({ url: `/pages/pet-edit/index${query}` })
}

export function PetShelf({ pets }: PetShelfProps) {
  const reachedLimit = pets.length >= MAX_PETS

  return (
    <View className='pet-shelf'>
      <View className='pet-shelf__head'>
        <Text className='pet-shelf__title'>我的毛孩子 · {pets.length}/{MAX_PETS}</Text>
      </View>
      <View className='pet-shelf__list'>
        {pets.map(pet => (
          <View key={pet._id} className='pet-shelf__card' onClick={() => goEdit(pet._id)}>
            <View className={`pet-shelf__photo ${pet.photoUrl ? '' : pet.photoKey}`}>
              {pet.photoUrl ? (
                <Image className='pet-shelf__photo-img' src={pet.photoUrl} mode='aspectFill' />
              ) : null}
              <Text className='pet-shelf__label'>{pet.species === 'cat' ? 'CAT' : 'DOG'}</Text>
            </View>
            <Text className='pet-shelf__name'>{pet.name} · {pet.breed}</Text>
            <Text className='pet-shelf__meta'>{pet.ageText || '待完善'} · {pet.tags[0] || '待完善'}</Text>
          </View>
        ))}
        {reachedLimit ? (
          <View className='pet-shelf__card pet-shelf__card--add pet-shelf__card--limit'>
            <Text className='pet-shelf__add-label'>已达上限</Text>
          </View>
        ) : (
          <View className='pet-shelf__card pet-shelf__card--add' onClick={() => goEdit()}>
            <View className='pet-shelf__add-icon'>
              <Icon name='plus' size={18} />
            </View>
            <Text className='pet-shelf__add-label'>添加宠物</Text>
          </View>
        )}
      </View>
    </View>
  )
}

export default PetShelf
