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

import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import Avatar from '@mui/material/Avatar';
import Divider from '@mui/material/Divider';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { makeStyles } from '@material-ui/core'

import AlertInfo from '../../../../reusableComponents/AlertInfo';
import { timeStampEU,firstLetter,copied,prodBaseURL } from '../../../../../helpers'
import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'

const useStyles = makeStyles({
  container: {
    width: '100%',
    maxHeight: '86vh',
    overflowY: 'scroll',
  '&::-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",
    },
  },   
  listItem: {
    '&:hover': {
      backgroundColor: '#f0f0f0',
    }
  },
  copyIcon: {
    color: '#54b0fc',
    cursor: 'pointer',
    '&:hover': {
      color: '#016cc3'
    },
  },  
})

const TextList = ({ allMessagesMemo,value,date }: { allMessagesMemo: TAllMessages,value: string,date: any }) => {
  const classes = useStyles()
  const filteredMessagesMemo =  allMessagesMemo.filter(({type}) => type === 'text')
  return (
  <>
      {filteredMessagesMemo.length > 0 &&
        <List className={classes.container}>
       {filteredMessagesMemo.map(({ message, createdAt, lastName, name, color, avatarUrl }) =>
      <div key={createdAt}>
          <ListItem alignItems="flex-start" className={classes.listItem}>
            <ListItemAvatar>
              <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
                  sx={{ background: color, width: 38, height: 38}}>
                  {`${firstLetter(name)}${firstLetter(lastName)}`}
              </Avatar>
            </ListItemAvatar>
             <ListItemText style={{ wordBreak: 'break-word',marginRight:2 }} primary={message}
               secondary={timeStampEU(createdAt)} secondaryTypographyProps={{color: '#020202',paddingTop:0.5}}
             />
            <CopyToClipboard onCopy={() => copied('Message')} text={message}>
              <ContentCopyIcon className={classes.copyIcon} fontSize='large' />
            </CopyToClipboard>             
          </ListItem>
          <Divider variant="inset" />
      </div>)}
    </List>}
    {(value || date) &&  filteredMessagesMemo.length === 0 && <AlertInfo name={`Can not find Text by request: ${value}`} />}
    {!value && !date && filteredMessagesMemo.length === 0 && <AlertInfo name='You do not have Text yet!'/>} 
  </>
  ) 
}

export default TextList