import { PropsWithChildren } from 'react'
import { Image, Text, View } from '@tarojs/components'
import './index.scss'

export type PublishIconName =
  | 'plus'
  | 'pin'
  | 'close'
  | 'image'
  | 'video'
  | 'hash'
  | 'smile'
  | 'paw'
  | 'save'
  | 'check'
  | 'chev'
  | 'eye'
  | 'lock'
  | 'globe'
  | 'users'
  | 'info'

const publishIconText: Record<PublishIconName, string> = {
  plus: '+',
  pin: '\u2316',
  close: 'x',
  image: '\u25a7',
  video: '\u25b7',
  hash: '#',
  smile: '\u263a',
  paw: '\u2724',
  save: '\u25a3',
  check: '\u2713',
  chev: '\u203a',
  eye: '\u25c9',
  lock: '\u25a4',
  globe: '\u25cd',
  users: '\u265f',
  info: 'i'
}

interface PublishIconProps {
  name: PublishIconName
  size?: number
  className?: string
}

export function PublishIcon({ name, size = 18, className = '' }: PublishIconProps) {
  return (
    <Text className={`publish-icon publish-icon--${name} ${className}`} style={{ fontSize: `${size}px`, width: `${size}px`, height: `${size}px` }}>
      {publishIconText[name]}
    </Text>
  )
}

interface PublishAvatarProps {
  avatarKey?: string
  avatarUrl?: string
  label?: string
  size?: 'sm' | 'md'
}

export function PublishAvatar({ avatarKey = 'gradient-avatar-1', avatarUrl, label, size = 'md', children }: PropsWithChildren<PublishAvatarProps>) {
  const avatarDisplayUrl = avatarUrl && !avatarUrl.startsWith('cloud://') ? avatarUrl : ''
  return (
    <View className={`publish-avatar publish-avatar--${size} publish-avatar--${avatarKey}`}>
      {avatarDisplayUrl ? (
        <Image className='publish-avatar__img' src={avatarDisplayUrl} mode='aspectFill' />
      ) : (
        children || (label ? <Text className='publish-avatar__label'>{label.slice(0, 1)}</Text> : null)
      )}
    </View>
  )
}

interface PublishSwitchProps {
  checked: boolean
  onChange?: (checked: boolean) => void
}

export function PublishSwitch({ checked, onChange }: PublishSwitchProps) {
  return <View className={`publish-switch ${checked ? 'publish-switch--checked' : ''}`} onClick={() => onChange?.(!checked)} />
}

interface PublishChipProps {
  active?: boolean
  prefix?: string
  onClick?: () => void
}

export function PublishChip({ active = false, prefix, onClick, children }: PropsWithChildren<PublishChipProps>) {
  return (
    <View className={`publish-chip ${active ? 'publish-chip--active' : ''}`} onClick={onClick}>
      {prefix ? <Text className='publish-chip__prefix'>{prefix}</Text> : null}
      <Text>{children}</Text>
    </View>
  )
}

interface PublishBottomSheetProps {
  visible: boolean
  onClose?: () => void
  centered?: boolean
  className?: string
}

export function PublishBottomSheet({ visible, onClose, centered = false, className = '', children }: PropsWithChildren<PublishBottomSheetProps>) {
  if (!visible) return null

  return (
    <View className={`publish-bottom-sheet-bg ${centered ? 'publish-bottom-sheet-bg--centered' : ''}`} onClick={onClose}>
      <View className={`publish-bottom-sheet ${className}`} onClick={event => event.stopPropagation()}>
        {children}
      </View>
    </View>
  )
}
