import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
import React from 'react'
import { StyleSheet, View } from 'react-native'
import { useFontScale, useTheme } from '../../hooks'
import { MAX_FONT_SIZE_MULTIPLIER } from '../../utils'
import AvatarPrimitive, { type AvatarRootProps } from '../primitive/avatar_primitive'

const ICON_SIZE_PX = 16
const SQUARE_BORDER_RADIUS_PX = 4

interface IconTileProps {
  icon: IconDefinition
  shape: 'circle' | 'square'
  size?: AvatarRootProps['size']
  maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier']
  style?: AvatarRootProps['style']
  testID?: string
}

export function IconTile({
  icon,
  shape,
  size = 'lg',
  maxFontSizeMultiplier = MAX_FONT_SIZE_MULTIPLIER,
  style,
  testID,
}: IconTileProps) {
  const fontScale = useFontScale({ maxFontSizeMultiplier })
  const styles = useStyles({ fontScale })

  const tile = (
    <View
      style={[styles.tile, shape === 'square' && styles.square]}
      testID={testID}
      accessibilityElementsHidden
    >
      <FontAwesomeIcon icon={icon} size={ICON_SIZE_PX * fontScale} color={styles.icon.color} />
    </View>
  )

  return (
    <AvatarPrimitive.Root size={size} maxFontSizeMultiplier={maxFontSizeMultiplier} style={style}>
      {shape === 'circle' ? <AvatarPrimitive.Mask>{tile}</AvatarPrimitive.Mask> : tile}
    </AvatarPrimitive.Root>
  )
}

const useStyles = ({ fontScale }: { fontScale: number }) => {
  const { colors } = useTheme()

  return StyleSheet.create({
    tile: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: colors.fillColorNeutral070,
    },
    square: {
      borderRadius: SQUARE_BORDER_RADIUS_PX * fontScale,
      overflow: 'hidden',
    },
    icon: {
      color: colors.iconColorDefaultPrimary,
    },
  })
}