FINAL-PROJECT-FRONT/src/components/HomePage/RightBar/HeaderBar/RightLists/SearchList/index.tsx

import { makeStyles } from '@material-ui/core'
import { useSelector } from 'react-redux'
import React, { useState } from 'react'
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 Typography from '@mui/material/Typography';
import Divider from '@mui/material/Divider';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import Search from './Search'
import AlertInfo from "../../../../../reusableComponents/AlertInfo";
import { getMessages } from '../../../../../../redux/messages/selector'
import { timeStamp,timeStampFilter,firstLetter,slicedWord,copied } from '../../../../../../helpers'

const useStyles = makeStyles({
  containerAbsolute: {
    position: 'absolute',
    top: 58,
    width: 506,
    borderLeft: 'solid 0.5px #9c9c9c',
    maxHeight: '905px',
    minHeight: '905px',
    overflowY: 'scroll',
    overflowX: 'hidden',
    backgroundColor: '#ffffff'
  },
  listItem: {
    '&:hover': {
      backgroundColor: '#f0f0f0',
    }
  },
})

const SearchList= () => {
    const classes = useStyles()
    const messages = useSelector(getMessages)
    const [value, setValue] = useState<string>('')
    const [date, setDate] = useState<any>('');
    const handleSearch = (e: React.ChangeEvent<HTMLInputElement>): void => setValue(e.target.value)

    const filteredMessages = () => messages.filter((el) => {
      if (!date) {
        return el.message.toLowerCase().includes(value.toLowerCase())
      } else if (el.message.toLowerCase().includes(value.toLowerCase())
        && timeStampFilter(date) === timeStampFilter(el.createdAt)) {
        return el
      }
    })
  const arr = filteredMessages()
return (
   <div>
    <Search handleSearch={handleSearch} value={value}
      setDate={setDate} date={date} />
     <div className={classes.containerAbsolute}>
      {messages.length > 0 ? arr.length > 0 ?
        <List sx={{ width: '100%' }}>
          {arr.map(({ name, lastName, avatarUrl, color, message, createdAt }) =>
          <div key={createdAt}>
            <CopyToClipboard onCopy={() => copied()} text={message}>
              <ListItem alignItems="flex-start" className={classes.listItem}>
                     <ListItemAvatar>
                        <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
                          sx={{ background: color, width: 44, height: 44, marginRight:2 }}>
                          {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
                        </Avatar>
                     </ListItemAvatar>
                     <ListItemText
                       primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 
                        ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
                       secondary={<>
                           <Typography
                             sx={{ display: 'block',wordBreak:'break-word' }}
                             component="span"
                             variant="body2"
                             color="text.primary"
                           >
                             {message}
                           </Typography>
                           {timeStamp(createdAt)}
                         </>}
                     />
                </ListItem>
              </CopyToClipboard>
              <Divider variant="inset"/>
            </div>)}
          </List> :
        <AlertInfo name={!date&&value ? `Can not find message by request: ${value}`:
        `Can not find message by request: ${value} and DataPicker: ${timeStampFilter(date)}`} />:
        <AlertInfo name='You do not have messages yet!' />}
     </div>
   </div>
  )
}

export default SearchList