import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import AvatarPrimitive, {
  type AvatarRootProps,
  type AvatarSize,
} from '../primitive/avatar_primitive'
import { getAvatarGradientProps } from './utils/avatar_gradient_colors'

const EMOJI_SIZE: Record<AvatarSize, number> = {
  xs: 8,
  sm: 10,
  md: 14,
  lg: 20,
  xl: 28,
  '2xl': 40,
}

interface EmojiAvatarProps {
  emoji: string
  color?: string | null
  size?: AvatarRootProps['size']
  maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier']
  style?: AvatarRootProps['style']
}

export function EmojiAvatar({
  emoji,
  color,
  size = 'lg',
  maxFontSizeMultiplier,
  style,
}: EmojiAvatarProps) {
  const gradientProps = getAvatarGradientProps(color)

  return (
    <AvatarPrimitive.Root size={size} maxFontSizeMultiplier={maxFontSizeMultiplier} style={style}>
      <AvatarPrimitive.Mask>
        <LinearGradient {...gradientProps} style={styles.gradientFill}>
          <View style={styles.contentContainer}>
            <Text allowFontScaling={false} style={{ fontSize: EMOJI_SIZE[size] }}>
              {emoji}
            </Text>
          </View>
        </LinearGradient>
      </AvatarPrimitive.Mask>
    </AvatarPrimitive.Root>
  )
}

const styles = StyleSheet.create({
  gradientFill: {
    width: '100%',
    height: '100%',
  },
  contentContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
})