import React from 'react'
import { StyleSheet, View } from 'react-native'
import { EmojiAvatar } from '../../components/display/emoji_avatar'
import { IconAvatar } from '../../components/display/icon_avatar'
import AvatarPrimitive from '../../components/primitive/avatar_primitive'
import { usePreviewAvatarDiameter } from '../../hooks/use_preview_avatar_diameter'
import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'
import type { AvatarPickerState } from './avatar_picker_state'

interface AvatarPreviewProps {
  state: AvatarPickerState
  fallback: React.ReactNode
}

function getPreviewNode(state: AvatarPickerState, diameter: number): React.ReactNode {
  const sizeProps = {
    size: '2xl',
    maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER_LANDMARK,
    style: { width: diameter, height: diameter },
  } as const

  switch (state.selectedType) {
    case 'icon':
      if (!state.selectedKey) return null
      return <IconAvatar iconKey={state.selectedKey} color={state.selectedColor} {...sizeProps} />
    case 'emoji':
      if (!state.selectedKey) return null
      return <EmojiAvatar emoji={state.selectedKey} color={state.selectedColor} {...sizeProps} />
    case 'image':
      if (!state.imagePreviewUri) return null
      return (
        <AvatarPrimitive.Root {...sizeProps}>
          <AvatarPrimitive.Mask>
            <AvatarPrimitive.Image sourceUri={state.imagePreviewUri} />
          </AvatarPrimitive.Mask>
        </AvatarPrimitive.Root>
      )
    default:
      return null
  }
}

export function AvatarPreview({ state, fallback }: AvatarPreviewProps) {
  const diameter = usePreviewAvatarDiameter()
  const preview = getPreviewNode(state, diameter)
  return <View style={styles.container}>{preview ?? fallback}</View>
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    paddingTop: 24,
    paddingBottom: 16,
  },
})