FINAL-PROJECT-FRONT/src/components/HomePage/LeftBar/SearchLists/ChatListRecent/index.tsx

import { makeStyles } from '@material-ui/core'
import List from '@mui/material/List';
import Stack from '@mui/material/Stack';

import { TChats } from '../../../../../typescript/redux/chats/types';
import RecentItem from './RecentItem';
import ChatItem from './ChatItem';
import AlertInfo from '../../../../reusableComponents/AlertInfo';

const useStyles = makeStyles({
  stack: {
    display: 'flex',
    justifyContent: 'space-around',
    paddingTop:20,
  },
  container: {
    width: '100%',
    maxHeight: '88vh',
    overflowY: 'scroll',
    position: 'absolute',
    animationDuration: '0.2s',
    animationDirection: 'normal',
    animation: `$moveElement`,    
  '&::-webkit-scrollbar': {
    width: '0.4em'
  },
  '&::-webkit-scrollbar-track': {
    boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
    webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
    backgroundColor: '#eceeec',
  },
  '&::-webkit-scrollbar-thumb': {
    backgroundColor: '#ccc8c8',
    },
  "&::-webkit-scrollbar-thumb:focus": {
    backgroundColor: "#959595",
          },
  "&::-webkit-scrollbar-thumb:active": {
    backgroundColor: "#959595",
    },
  },
  '@keyframes moveElement': {
   '0%': { left: '-100%'},
   '100%': { left: '0%'},
  },    
})

interface IChatListRecent {
  value: string,
  date:any,
  filteredAndSortedChats: TChats,
  handleListItemClick: (companionId: string) => void,
}

const ChatListRecent = ({value,date,filteredAndSortedChats,handleListItemClick}:IChatListRecent) => {
  const classes = useStyles()

return (
  <>
    {!value && !date && filteredAndSortedChats.length > 0 &&
    <Stack direction="row" className={classes.stack}>
      {filteredAndSortedChats.slice(0, 6).map((chat) =>
      <RecentItem key={chat.companionId} handleListItemClick={handleListItemClick} chat={chat} />)}
    </Stack>}
    {(value || date) && filteredAndSortedChats.length > 0 &&
      <List className={classes.container} component="nav" aria-label="main mailbox folders">
        {filteredAndSortedChats.map((chat) =>
        <ChatItem key={chat.companionId} handleListItemClick={handleListItemClick} chat={chat} />)}
      </List>}
    {(value || date) && filteredAndSortedChats.length === 0 && <AlertInfo name={`Can not find Chat by request: ${value}`} />}
    {!value && !date && filteredAndSortedChats.length === 0 &&<AlertInfo name='You do not have any Chats yet!'/>}
  </>)  
}

export default ChatListRecent