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

interface ComposerToolbarProps {
  count: number
  disabled: boolean
  label?: string
  onToolClick: (tool: string) => void
  onSubmit: () => void
}

const tools: Array<{ key: string; icon: PublishIconName }> = [
  { key: 'image', icon: 'image' },
  { key: 'video', icon: 'video' },
  { key: 'location', icon: 'pin' },
  { key: 'topic', icon: 'hash' },
  { key: 'emoji', icon: 'smile' }
]

export function ComposerToolbar({ count, disabled, label = '发布', onToolClick, onSubmit }: ComposerToolbarProps) {
  return (
    <View className='publish-composer-toolbar'>
      <View className='publish-composer-toolbar__top'>
        <View className='publish-composer-toolbar__tools'>
          {tools.map(tool => (
            <View key={tool.key} className='publish-composer-toolbar__tool' onClick={() => onToolClick(tool.key)}>
              <PublishIcon name={tool.icon} size={18} />
            </View>
          ))}
        </View>
        <Text className={`publish-composer-toolbar__count ${count > 1800 ? 'publish-composer-toolbar__count--warn' : ''}`}>{count}/2000</Text>
      </View>
      <View className={`publish-composer-toolbar__button ${disabled ? 'publish-composer-toolbar__button--disabled' : ''}`} onClick={disabled ? undefined : onSubmit}>
        {label}
      </View>
    </View>
  )
}

export default ComposerToolbar
