import React from 'react';
import { View, Text, Image } from 'react-native';
import { FilterImage } from 'react-native-svg/filter-image';

import { styles } from './styles';
import { Colors } from 'src/theme';

export const AvatarWithInitials = ({
  text,
  flag,
  size,
  borderColor = Colors.FILL_LIGHT,
  fontSize = 22,
  borderWidth = 2,
  grayscale = false
}: {
  text: string;
  flag: string;
  size: number;
  borderColor?: string;
  fontSize?: number;
  borderWidth?: number;
  grayscale?: boolean;
}) => {
  const shadowProps = [
    { textShadowOffset: { width: -0.5, height: -0.5 } },
    { textShadowOffset: { width: 0, height: -0.5 } },
    { textShadowOffset: { width: 0.5, height: -0.5 } },
    { textShadowOffset: { width: -0.5, height: 0 } },
    { textShadowOffset: { width: 0.5, height: 0 } },
    { textShadowOffset: { width: -0.5, height: 0.5 } },
    { textShadowOffset: { width: 0, height: 0.5 } },
    { textShadowOffset: { width: 0.5, height: 0.5 } }
  ].map((shadow) => ({
    ...shadow,
    textShadowRadius: 1,
    textShadowColor: 'white'
  }));

  return (
    <View
      style={[
        styles.container,
        { width: size, height: size, borderRadius: size / 2, borderColor, borderWidth }
      ]}
    >
      {grayscale ? (
        <FilterImage
          source={{ uri: flag }}
          style={[
            styles.avatar,
            {
              filter: 'grayscale(100%)'
            }
          ]}
        />
      ) : (
        <Image style={styles.avatar} source={{ uri: flag }} />
      )}

      <View style={styles.initialsContainer}>
        {shadowProps.map((props, index) => (
          <Text key={index} style={[styles.initials, props, { fontSize }]}>
            {text}
          </Text>
        ))}
      </View>
    </View>
  );
};
