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

export default ({
  name = "",
  url = null,
  size = responsiveWidth(7),
  containerStyle = {},
  forceRawImage = false,
  badge = {},
}) => {
  const uniqColorById = (uniqId = "test") => {
    // Calculer un nombre unique à partir de l'ID de l'employé
    let uniqueNumber = 0;

    for (let i = 0; i < uniqId?.length; i++) {
      uniqueNumber += uniqId.charCodeAt(i);
    }

    // génère des couleurs pastels claires
    const color = `hsl(${uniqueNumber % 360}, 100%, 90%)`;

    return color;
  };

  return (
    <View
      style={{
        width: size,
        height: size,
        borderRadius: 500,
        ...containerStyle,
      }}
    >
      <View
        style={{
          ...Style.containerRound,
          width: "100%",
          height: "100%",
          backgroundColor: url ? "transparent" : uniqColorById(name),
        }}
      >
        {url ? (
          <Image
            cachePolicy={"memory"}
            source={{
              uri: forceRawImage ? url : formatImageURL({ url, size: 200 }),
            }}
            style={{
              width: size,
              height: size,
              borderRadius: size / 2,
            }}
          />
        ) : (
          <Text
            style={Fonts({
              type: "section",
              color: Palette.darkPurple,
              style: { fontSize: size / 3 },
            })}
          >
            {getInitials(name)}
          </Text>
        )}
      </View>
      <Badge {...badge} />
    </View>
  );
};