import { Text, View } from "react-native";
import { Image as ExpoImage } from "expo-image";
import { responsiveWidth } from "../actions/responsiveSizes.js";
import { getInitials } from "../helpers";
import { Fonts, Style } from "../styles";

export default ({
  name = "",
  url = null,
  size = responsiveWidth(7),
  containerStyle = {},
}) => {
  const colors = [
    "#FB68A8",
    "#FA6DA8",
    "#F971A7",
    "#F876A7",
    "#F67BA6",
    "#F580A6",
    "#F384A5",
    "#F289A5",
    "#F08EA4",
    "#EF93A4",
    "#ED97A3",
    "#EC9CA3",
    "#EAA1A2",
    "#E8A6A2",
    "#E7AAA1",
    "#E5AFA1",
    "#E3B4A0",
    "#E2B9A0",
    "#E0BDAF",
    "#DFC2AE",
    "#DDC7AE",
    "#DBCBAE",
    "#DACFAE",
    "#D8D4AE",
    "#D6D8AE",
    "#D5DCAE",
    "#D3E1AE",
    "#D2E5AE",
    "#D0E9AE",
    "#CFEDAE",
  ];

  const pickColor = (name) => {
    const sumChars = name
      .split("")
      .reduce((acc, char) => acc + char.charCodeAt(0), 0);
    const index = sumChars % 30;

    return colors[index];
  };

  return (
    <View
      style={{
        ...Style.containerRound,
        width: size,
        height: size,
        backgroundColor: pickColor(name),
        ...containerStyle,
      }}
    >
      {url ? (
        <ExpoImage
          source={{ uri: url }}
          cachePolicy="memory-disk"
          priority="high"
          contentFit="cover"
          transition={100}
          style={{
            width: size,
            height: size,
            borderRadius: size / 2,
          }}
        />
      ) : (
        <Text style={Fonts({ type: "section", style: { fontSize: size / 3 } })}>
          {getInitials(name)}
        </Text>
      )}
    </View>
  );
};