import React, { useMemo } from 'react';

import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';

import { UserResponse } from 'stream-chat';

import { Avatar, AvatarProps } from './Avatar';
import {
  fontSizes,
  iconSizes,
  indicatorPositions,
  indicatorSizes,
  numberOfInitials,
} from './constants';

import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
import { useTheme } from '../../../contexts/themeContext/ThemeContext';
import { getInitialsFromName, hashStringToNumber } from '../../../utils/utils';
import { OnlineIndicator } from '../Badge';

export type UserAvatarProps = {
  user: UserResponse;
  showOnlineIndicator?: boolean;
  size: AvatarProps['size'];
  showBorder?: boolean;
  style?: StyleProp<ViewStyle>;
};

export const UserAvatar = (props: UserAvatarProps) => {
  const { user, size, showBorder = !!user.image, showOnlineIndicator, style } = props;
  const { icons } = useComponentsContext();
  const {
    theme: { semantics },
  } = useTheme();
  const styles = useStyles();
  const hashedValue = hashStringToNumber(user?.id || '');
  const index = ((hashedValue % 5) + 1) as 1 | 2 | 3 | 4 | 5;
  const avatarBackgroundColor = semantics[`avatarPaletteBg${index}`];
  const avatarTextColor = semantics[`avatarPaletteText${index}`];

  const placeholder = useMemo(() => {
    if (user?.name) {
      return (
        <Text style={[fontSizes[size], { color: avatarTextColor }]}>
          {getInitialsFromName(user.name, numberOfInitials[size])}
        </Text>
      );
    } else {
      return (
        <icons.PeopleIcon
          height={iconSizes[size]}
          stroke={avatarTextColor}
          width={iconSizes[size]}
        />
      );
    }
  }, [user?.name, size, avatarTextColor, icons]);

  return (
    <View testID='user-avatar'>
      <Avatar
        backgroundColor={avatarBackgroundColor}
        imageUrl={user?.image}
        name={user?.name || user?.id}
        placeholder={placeholder}
        showBorder={showBorder}
        size={size}
        style={style}
      />
      {showOnlineIndicator ? (
        <View style={[styles.onlineIndicatorWrapper, indicatorPositions[size]]}>
          <OnlineIndicator online={true} size={indicatorSizes[size]} />
        </View>
      ) : null}
    </View>
  );
};

const useStyles = () => {
  return useMemo(
    () =>
      StyleSheet.create({
        onlineIndicatorWrapper: {
          position: 'absolute',
        },
      }),
    [],
  );
};