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

interface VisibilitySheetProps {
  visible: boolean
  value: Visibility
  onChange: (value: Visibility) => void
  onClose: () => void
}

const options: Array<{
  key: Visibility
  icon: PublishIconName
  title: string
  desc: string
  tone: string
}> = [
  { key: 'public', icon: 'globe', title: '公开', desc: '所有汪圈用户可见,会出现在广场推荐中', tone: 'public' },
  { key: 'friends', icon: 'users', title: '汪友', desc: '仅你关注的人可见,会出现在关注信息流', tone: 'friends' },
  { key: 'private', icon: 'lock', title: '仅自己', desc: '仅自己可见,作为私人记录保存', tone: 'private' }
]

export function VisibilitySheet({ visible, value, onChange, onClose }: VisibilitySheetProps) {
  return (
    <PublishBottomSheet visible={visible} onClose={onClose}>
      <View className='publish-visibility-sheet__grabber' />
      <Text className='publish-visibility-sheet__title'>选择可见范围</Text>
      <Text className='publish-visibility-sheet__desc'>不同范围的动态会出现在不同的信息流中</Text>
      <View className='publish-visibility-sheet__options'>
        {options.map(option => {
          const checked = option.key === value
          return (
            <View
              key={option.key}
              className={`publish-visibility-sheet__option ${checked ? 'publish-visibility-sheet__option--checked' : ''}`}
              onClick={() => {
                onChange(option.key)
                setTimeout(onClose, 220)
              }}
            >
              <View className={`publish-visibility-sheet__icon publish-visibility-sheet__icon--${option.tone}`}>
                <PublishIcon name={option.icon} size={18} />
              </View>
              <View className='publish-visibility-sheet__text'>
                <Text className='publish-visibility-sheet__name'>{option.title}</Text>
                <Text className='publish-visibility-sheet__sub'>{option.desc}</Text>
              </View>
              <View className='publish-visibility-sheet__check'>{checked ? <PublishIcon name='check' size={12} /> : null}</View>
            </View>
          )
        })}
      </View>
    </PublishBottomSheet>
  )
}

export default VisibilitySheet
