App/src/caj/components/userUI/AccountInfoBanner.tsx

import {ThemeMode} from '@caj/configs/appVar';
import {
  darkThemeStyle,
  getBackgroundColor,
  themeNB,
  themeSelector,
} from '@caj/configs/colors';
import {UserId} from '@caj/configs/types';
import {RootState} from '@caj/redux/store';
import MyUserManager from '@caj/user/MyUserManager';
import {User} from '@caj/user/types';
import UserManager from '@caj/user/UserManager';
import {Box, Center, HStack, Skeleton, Text, VStack} from 'native-base';
import {useSelector} from 'react-redux';
import {ProfilePicture} from '../ProfilePicture';

import {TextSkeleton} from '../simple/Skeleton';

// 7396bd88-fe36-4e2e-9810-a83b33440ab6

export default function AccountInfoBanner(props: {
  user: User;
  align?: 'center' | 'right';
}) {
  const user = props.user;
  const align = props.align || 'center';

  const theme = themeSelector();
  const _theme = themeNB(theme);

  const lang = useSelector((state: RootState) => state.appVariables.lang);

  const spacing = 4;
  const size = 50;

  let boxHeight = size * 3 + spacing * 2;

  if (theme === ThemeMode.Darkest) {
    boxHeight += 2;
  }

  const Background = (props: {children: any}) => {
    if (align === 'right') {
      return (
        <Box
          bg={getBackgroundColor(theme)}
          {...darkThemeStyle(theme, 'black.500')}
          py={spacing + 'px'}
          pl={spacing + 'px'}
          ml={2}
          mb={10}
          style={{
            borderTopLeftRadius: size + spacing,
            borderBottomLeftRadius: size / 4 + spacing,
          }}>
          {props.children}
        </Box>
      );
    }
    if (align === 'center') {
      return props.children;
    }
  };

  return (
    <Background>
      <VStack space={spacing + 'px'}>
        <Box
          bg={'blackBG.400'}
          ml={size}
          pl={size * 1.2}
          pr={3}
          height={size}
          width={'85%'}
          borderRightRadius={size / 2}
          {...darkThemeStyle(theme, 'black.500')}>
          <TextSkeleton
            onPress={() => {
              MyUserManager.logoutMyUser();
            }}
            SkeletonProps={{
              lines: 1,
              width: '160px',
            }}
            color="primary.400">
            {user.Username.data}
          </TextSkeleton>
          <TextSkeleton
            SkeletonProps={{lines: 1, width: '120px'}}
            color="white.900"
            margin={0}
            padding={0}>
            {user.AccountName.data}
          </TextSkeleton>
        </Box>
        <HStack space={spacing + 'px'} mr={spacing + 'px'} alignItems="center">
          <HStack
            space={2}
            bg={'blackBG.400'}
            ml={size}
            pl={size * 1.2}
            pr={size / 2}
            height={size}
            borderRightRadius={size / 2}
            {...darkThemeStyle(theme, 'black.500')}>
            <VStack alignItems={'center'}>
              <TextSkeleton color="primary.400" SkeletonProps={{lines: 1}}>
                {user.FollowingCount.data}
              </TextSkeleton>
              <Text color="white.900">{lang.account.profile.follower}</Text>
            </VStack>
            <VStack alignItems={'center'}>
              <TextSkeleton color="primary.400" SkeletonProps={{lines: 1}}>
                {user.FollowersCount.data}
              </TextSkeleton>
              <Text color="white.900">{lang.account.profile.following}</Text>
            </VStack>
          </HStack>
          <Box
            flexGrow={1}
            maxWidth={size * 4 + 'px'}
            height={size * 0.8 + 'px'}
            backgroundColor={'primary.800'}
            borderRadius={size / 2}
            justifyContent="center">
            <TextSkeleton
              textAlign={'center'}
              color="#fff"
              SkeletonProps={{
                lines: 1,
                width: '20%',
                alignSelf: 'center',
              }}>
              {user.FollowersCount.data === undefined
                ? undefined
                : 'Lvl. ' + user.FollowersCount.data}
            </TextSkeleton>
          </Box>
        </HStack>

        <Box
          bg={'blackBG.400'}
          height={size}
          width={'100%'}
          borderLeftRadius={size / 4}
          {...darkThemeStyle(theme, 'black.500')}>
          <TextSkeleton
            mx={spacing * 2 + 'px'}
            numberOfLines={2}
            SkeletonProps={{
              lines: 2,
              width: '80%',
              mx: spacing * 2 + 'px',
            }}
            color="white.900">
            {user.Description.data}
          </TextSkeleton>
        </Box>
      </VStack>
      <Box position={'absolute'} top={spacing + 'px'} left={spacing + 'px'}>
        <ProfilePicture size={size * 2 + spacing} UserId={user.UserId} />
      </Box>
    </Background>
  );
}

export function MyUserAccountInfoBanner() {
  const myUser =
    MyUserManager.getSelectedMyUserSelector() ||
    UserManager.initUndefinedUser('none');

  return <AccountInfoBanner user={myUser} align="right" />;
}