import {
  findIconDefinition,
  type IconDefinition,
  type IconName,
} from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
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 ICON_SIZE: Record<AvatarSize, number> = {
  xs: 10,
  sm: 12,
  md: 16,
  lg: 20,
  xl: 28,
  '2xl': 40,
}

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

function findIcon(iconKey: string): IconDefinition | undefined {
  return findIconDefinition({ prefix: 'fas', iconName: iconKey as IconName })
}

export function IconAvatar({
  iconKey,
  color,
  size = 'lg',
  maxFontSizeMultiplier,
  style,
}: IconAvatarProps) {
  const gradientProps = getAvatarGradientProps(color)
  const iconDef = findIcon(iconKey)

  if (__DEV__ && !iconDef) {
    console.warn(`IconAvatar: unrecognized icon key "${iconKey}"`)
  }

  return (
    <AvatarPrimitive.Root size={size} maxFontSizeMultiplier={maxFontSizeMultiplier} style={style}>
      <AvatarPrimitive.Mask>
        <LinearGradient {...gradientProps} style={styles.gradientFill}>
          <View style={styles.contentContainer}>
            {iconDef ? (
              <FontAwesomeIcon icon={iconDef} size={ICON_SIZE[size]} color="white" />
            ) : (
              <Text
                style={[styles.fallbackText, { fontSize: ICON_SIZE[size] }]}
                accessibilityLabel="Unknown icon"
                allowFontScaling={false}
              >
                ?
              </Text>
            )}
          </View>
        </LinearGradient>
      </AvatarPrimitive.Mask>
    </AvatarPrimitive.Root>
  )
}

const styles = StyleSheet.create({
  gradientFill: {
    width: '100%',
    height: '100%',
  },
  contentContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  fallbackText: {
    color: 'white',
    fontWeight: 'bold',
    opacity: 0.7,
  },
})