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

interface PetPickerSheetProps {
  visible: boolean
  pets: Pet[]
  selectedId?: string
  onSelect: (petId: string) => void
  onClose: () => void
}

export function PetPickerSheet({ visible, pets, selectedId, onSelect, onClose }: PetPickerSheetProps) {
  return (
    <PublishBottomSheet visible={visible} onClose={onClose} className='pet-picker'>
      <View className='pet-picker__title'>关联宠物</View>
      <View className='pet-picker__list'>
        <View
          className={`pet-picker__row ${!selectedId ? 'pet-picker__row--active' : ''}`}
          onClick={() => onSelect('')}
        >
          <View className='pet-picker__none'>
            <PublishIcon name='close' size={16} />
          </View>
          <Text className='pet-picker__name'>不关联宠物</Text>
          {!selectedId ? <PublishIcon name='check' size={16} className='pet-picker__check' /> : null}
        </View>
        {pets.map(pet => (
          <View
            key={pet._id}
            className={`pet-picker__row ${selectedId === pet._id ? 'pet-picker__row--active' : ''}`}
            onClick={() => onSelect(pet._id)}
          >
            <PublishAvatar avatarKey={pet.avatarKey} avatarUrl={pet.photoUrl} size='md' label={pet.name} />
            <View className='pet-picker__meta'>
              <Text className='pet-picker__name'>{pet.name}</Text>
              <Text className='pet-picker__breed'>{pet.breed || '未填写品种'}</Text>
            </View>
            {selectedId === pet._id ? <PublishIcon name='check' size={16} className='pet-picker__check' /> : null}
          </View>
        ))}
        {pets.length === 0 ? <Text className='pet-picker__empty'>你还没有添加毛孩子，可在「我的」里添加</Text> : null}
      </View>
    </PublishBottomSheet>
  )
}

export default PetPickerSheet
