App/src/caj/components/chat/listChats.tsx

import {appNonSaveVarActions} from '@caj/configs/appNonSaveVarReducer';
import {ThemeMode} from '@caj/configs/appVar';
import {
  darkThemeStyle,
  getBackgroundColor,
  themeSelector,
} from '@caj/configs/colors';
import BigDataManager from '@caj/helper/storage/BigDataManager';
import LangFormat from '@caj/lang/default';
import {HomeScreenNavigationProp} from '@caj/Navigation';
import {RootState, store} from '@caj/redux/store';
import {ChatScreenNavigationProp} from '@caj/tabs/main/ChatTab';
import UserManager from '@caj/user/UserManager';
import {useNavigation} from '@react-navigation/native';
import {Box, HStack, Pressable, Text, VStack} from 'native-base';
import {useSelector} from 'react-redux';
import {start} from 'repl';
import {ProfilePicture} from '../ProfilePicture';
import {TextSkeleton} from '../simple/Skeleton';
import {chatEntity, convertChatDatabase, getTagUI} from './types';

function ChatItem(props: {
  chat: chatEntity;
  navigation: HomeScreenNavigationProp;
  theme: ThemeMode;
  ppSize: number;
  tagSize: number;
  space: number;
  lang: LangFormat;
}) {
  const chat = props.chat;
  const navigation = props.navigation;
  const theme = props.theme;
  const ppSize = props.ppSize;
  const tagSize = props.tagSize;
  const space = props.space;
  const lang = props.lang;

  const roomId = chat.roomId;
  const user = UserManager.getUserSelector(chat.users[0]);

  return (
    <Pressable
      onPress={() => {
        let chat = {...store.getState().nonSaveVariables.chats[roomId]};

        chat.timestamp = Math.round(new Date().getTime() / 1000);

        store.dispatch(appNonSaveVarActions.changeChatEntity(chat));

        BigDataManager.databases.chatRoomInfos.setEntry(
          convertChatDatabase(chat),
        );

        store.dispatch(appNonSaveVarActions.setSelectedChat(roomId));
        navigation.navigate('ChatList', {screen: 'Chat'});
        //navigation.navigate('Register', {screen: 'RegStepOne'});
      }}>
      {({isHovered, isFocused, isPressed}) => {
        return (
          <Box
            bg={isHovered ? 'black.200' : 'blackBG.400'}
            {...darkThemeStyle(theme, 'black.400')}
            borderRadius={ppSize / 2 + 'px'}
            borderTopRightRadius={
              chat.unreadMessages !== 0 ? tagSize / 2 + 'px' : ppSize / 2 + 'px'
            }
            borderBottomLeftRadius={
              chat.tags.length > 0 ? tagSize / 2 + 'px' : ppSize / 2 + 'px'
            }
            marginX={space + 'px'}
            padding={space + 'px'}>
            <HStack
              position={'absolute'}
              space={space * 2 + 'px'}
              right={space + 'px'}
              top={-tagSize * 0.3 + 'px'}>
              <Box
                height={tagSize + 'px'}
                paddingX={tagSize / 3 + 'px'}
                borderRadius={tagSize / 2}
                bg={'#666'}>
                <TextSkeleton
                  color={'#eee'}
                  SkeletonProps={{
                    lines: 1,
                    width: '75px',
                  }}
                  lineHeight={tagSize + 'px'}
                  fontSize={tagSize / 1.75 + 'px'}>
                  {user.AccountName.data}
                </TextSkeleton>
              </Box>
              <Box
                alignItems={'center'}
                height={tagSize + 'px'}
                paddingX={tagSize / 2.75 + 'px'}
                mt={tagSize * 0.3 + space + 'px'}
                borderRadius={tagSize / 2}
                bg={'primary.600'}
                opacity={chat.unreadMessages === 0 ? 0 : 1}>
                <TextSkeleton
                  color={'#fff'}
                  SkeletonProps={{
                    lines: 1,
                    width: '75px',
                  }}
                  lineHeight={tagSize + 'px'}
                  fontSize={tagSize / 1.75 + 'px'}>
                  {chat.unreadMessages}
                </TextSkeleton>
              </Box>
            </HStack>
            <VStack>
              <HStack space={space + 'px'}>
                <ProfilePicture UserId={roomId} size={ppSize}></ProfilePicture>
                <VStack mt={ppSize / 6 + 'px'}>
                  <TextSkeleton
                    lineHeight={ppSize / 3 + 'px'}
                    numberOfLines={1}
                    SkeletonProps={{
                      lines: 1,
                      width: '160px',
                    }}
                    color="primary.400">
                    {user.Username.data}
                  </TextSkeleton>
                  <TextSkeleton
                    lineHeight={ppSize / 3 + 'px'}
                    numberOfLines={1}
                    SkeletonProps={{
                      lines: 1,
                      width: '160px',
                    }}
                    color="white.700">
                    {'I love Chicken McNuggets von Burgerking'}
                  </TextSkeleton>
                </VStack>
              </HStack>
              {chat.tags.length > 0 ? (
                <HStack flexWrap={'wrap'}>
                  {chat.tags.map((tag, i) => {
                    const tagObj = getTagUI(tag, lang);

                    let tagName = tagObj.name;
                    return (
                      <Box
                        key={'tag' + i + tag + chat.roomId}
                        height={tagSize + 'px'}
                        mr={space + 'px'}
                        mt={space + 'px'}
                        paddingX={tagSize / 3 + 'px'}
                        borderRadius={tagSize / 2}
                        bg={tagObj.background}>
                        <Text
                          color={tagObj.textColor}
                          lineHeight={tagSize + 'px'}
                          fontSize={tagSize / 1.75 + 'px'}>
                          {tagName}
                        </Text>
                      </Box>
                    );
                  })}
                </HStack>
              ) : null}
            </VStack>
          </Box>
        );
      }}
    </Pressable>
  );
}

export function ListChats() {
  const theme = themeSelector();
  const chats = useSelector((state: RootState) => state.nonSaveVariables.chats);
  const chatActivity = useSelector(
    (state: RootState) => state.nonSaveVariables.chatActivity,
  );

  const space = 4;
  const ppSize = 64;
  const tagSize = 24;

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

  const navigation = useNavigation<HomeScreenNavigationProp>();

  return (
    <VStack
      mt={space * 2 + 'px'}
      space={tagSize * 0.3 + space + 'px'}
      width="100%"
      marginY={space + 'px'}>
      {chatActivity.map((roomId, i) => {
        const chat = chats[roomId];

        return (
          <ChatItem
            key={'chatList_i' + i + roomId}
            navigation={navigation}
            chat={chat}
            theme={theme}
            space={space}
            ppSize={ppSize}
            tagSize={tagSize}
            lang={lang}
          />
        );
      })}
    </VStack>
  );
}