import { useNavigation, useRoute } from '@react-navigation/native'
import React from 'react'
import { Pressable, StyleSheet, View } from 'react-native'
import { Icon, Text } from '../../../components'
import { EmojiAvatar } from '../../../components/display/emoji_avatar'
import { IconAvatar } from '../../../components/display/icon_avatar'
import AvatarPrimitive from '../../../components/primitive/avatar_primitive'
import { useTheme } from '../../../hooks'
import type { AvatarUpdatePayload } from '../../../hooks/use_conversation_avatar_update'

interface AvatarSelectionRowProps {
  avatarSelection?: AvatarUpdatePayload
}

export function AvatarSelectionRow({ avatarSelection }: AvatarSelectionRowProps) {
  const styles = useStyles()
  const navigation = useNavigation()
  const route = useRoute()

  return (
    <Pressable
      style={styles.avatarSection}
      onPress={() =>
        navigation.navigate('AvatarPicker', {
          source_params: route.params as Record<string, unknown>,
          ...(avatarSelection && { avatar_selection: avatarSelection }),
        })
      }
    >
      <Text style={styles.avatarLabel}>Customize avatar</Text>
      <View style={styles.avatarSectionTrailing}>
        <AvatarSelectionPreview avatarSelection={avatarSelection} />
        <Icon name="general.rightChevron" size={12} />
      </View>
    </Pressable>
  )
}

interface AvatarSelectionPreviewProps {
  avatarSelection?: AvatarUpdatePayload
}

export function AvatarSelectionPreview({ avatarSelection }: AvatarSelectionPreviewProps) {
  if (!avatarSelection || avatarSelection.kind === 'clear') return null

  switch (avatarSelection.kind) {
    case 'icon':
      return <IconAvatar iconKey={avatarSelection.key} color={avatarSelection.color} size="md" />
    case 'emoji':
      return <EmojiAvatar emoji={avatarSelection.key} color={avatarSelection.color} size="md" />
    case 'image':
      return (
        <AvatarPrimitive.Root size="md">
          <AvatarPrimitive.Mask>
            <AvatarPrimitive.Image sourceUri={avatarSelection.imageAsset.uri} />
          </AvatarPrimitive.Mask>
        </AvatarPrimitive.Root>
      )
  }
}

const useStyles = () => {
  const { colors } = useTheme()

  return StyleSheet.create({
    avatarSection: {
      padding: 16,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
    },
    avatarSectionTrailing: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 12,
    },
    avatarLabel: {
      fontSize: 18,
      color: colors.textColorDefaultPrimary,
    },
  })
}