import {appNonSaveVarActions} from '@caj/configs/appNonSaveVarReducer';
import {
  darkThemeStyle,
  getBackgroundColor,
  themeSelector,
} from '@caj/configs/colors';
import {RootScreenNavigationProp} from '@caj/Navigation';
import {RootState, store} from '@caj/redux/store';
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 {chatType, getTagUI} from './types';

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

  console.log('selectedChat', selectedChat);

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

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

  const navigation = useNavigation<RootScreenNavigationProp>();

  return (
    <VStack
      mt={space * 2 + 'px'}
      space={tagSize * 0.3 + space + 'px'}
      width="100%"
      marginY={space + 'px'}>
      {chatActivity.map((chatId, i) => {
        const chat = chats[chatId];
        if (chat.type === chatType.User) {
          const user = UserManager.getUserSelector(chatId);

          return (
            <Pressable
              key={'chatList_i' + i + chatId}
              onPress={() => {
                store.dispatch(appNonSaveVarActions.setSelectedChat(chatId));
                navigation.navigate('Chat', {screen: 'Overview'});
                //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={chatId}
                          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.id}
                                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>
          );
        }
      })}
    </VStack>
  );
}
