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

interface PublishOptionsProps {
  pet?: Pet
  visibility: Visibility
  saveDraft: boolean
  location?: string
  onPetClick: () => void
  onLocationClick: () => void
  onVisibilityClick: () => void
  onDraftChange: (value: boolean) => void
}

const visibilityText: Record<Visibility, string> = {
  public: '公开 · 所有人可见',
  friends: '汪友 · 仅好友可见',
  private: '仅自己 · 私人记录'
}

function OptionIcon({ name, tone }: { name: PublishIconName; tone: string }) {
  return (
    <View className={`publish-options__icon publish-options__icon--${tone}`}>
      <PublishIcon name={name} size={16} />
    </View>
  )
}

export function PublishOptions({ pet, visibility, saveDraft, location, onPetClick, onLocationClick, onVisibilityClick, onDraftChange }: PublishOptionsProps) {
  return (
    <View className='publish-options'>
      <View className='publish-options__row' onClick={onPetClick}>
        <OptionIcon name='paw' tone='pet' />
        <Text className='publish-options__name'>关联宠物</Text>
        <View className='publish-options__right'>
          {pet ? (
            <View className='publish-options__pet'>
              <PublishAvatar avatarKey={pet.avatarKey} avatarUrl={pet.photoUrl} size='sm' />
              <Text>{pet.name}</Text>
            </View>
          ) : (
            <Text className='publish-options__value'>选择</Text>
          )}
          <PublishIcon name='chev' size={18} />
        </View>
      </View>
      <View className='publish-options__row' onClick={onLocationClick}>
        <OptionIcon name='pin' tone='location' />
        <Text className='publish-options__name'>位置</Text>
        <View className='publish-options__right'>
          <Text className='publish-options__value'>{location || '添加位置'}</Text>
          <PublishIcon name='chev' size={18} />
        </View>
      </View>
      <View className='publish-options__row' onClick={onVisibilityClick}>
        <OptionIcon name='eye' tone='visibility' />
        <Text className='publish-options__name'>可见范围</Text>
        <View className='publish-options__right'>
          <Text className='publish-options__value'>{visibilityText[visibility]}</Text>
          <PublishIcon name='chev' size={18} />
        </View>
      </View>
      <View className='publish-options__row'>
        <OptionIcon name='save' tone='draft' />
        <Text className='publish-options__name'>保存为草稿</Text>
        <View className='publish-options__right'>
          <PublishSwitch checked={saveDraft} onChange={onDraftChange} />
        </View>
      </View>
    </View>
  )
}

export default PublishOptions
