import {Skeleton, Text, useTheme} from 'native-base';
import {ProfilePictureType, User} from '@caj/user/types';
import {Box} from 'native-base';
import {UserId} from '@caj/configs/types';
import UserManager from '@caj/user/UserManager';

export function ProfilePicture(props: {size: number; UserId: UserId}) {
  const size = props.size;
  const UserId = props.UserId;
  const ProfilePicture = UserManager.getUserSelectorPicture(UserId);
  const accountName = UserManager.getUserSelectorAccountName(UserId).data;

  if (accountName === undefined) {
    return (
      <Skeleton
        bg={'black.200'}
        width={size + 'px'}
        height={size + 'px'}
        style={{borderRadius: size / 2}}></Skeleton>
    );
  }

  let picRaw: ProfilePictureType;

  if (size > 120) {
    if (ProfilePicture.hq?.url !== undefined && ProfilePicture.hq?.url !== '') {
      if (ProfilePicture.hq?.data !== undefined) {
        picRaw = ProfilePicture.hq;
      }
    }
  }

  let firstLetter = accountName[0];
  if (firstLetter === '.' || firstLetter === '_') {
    for (var i = 0; i < accountName.length; i++) {
      if (accountName[i] !== '.' && accountName[i] !== '_') {
        firstLetter = accountName[i];
        break;
      }
    }
  }

  let hash = 0;

  for (var i = 0; i < accountName.length; i++) {
    let chr = accountName.charCodeAt(i);
    hash = (hash << 5) - hash + chr;
    //hash |= 0; // Convert to 32bit integer
  }

  hash = Math.abs(hash >> 16);

  return (
    <Box
      bg={'hsl(' + hash + ', 70%, 60%)'}
      width={size + 'px'}
      height={size + 'px'}
      style={{borderRadius: size / 2}}>
      <Text
        color={'#fff'}
        textAlign={'center'}
        width={size + 'px'}
        height={size + 'px'}
        lineHeight={size + 'px'}
        fontSize={size * 0.75 + 'px'}>
        {firstLetter.toUpperCase()}
      </Text>
    </Box>
  );
}
