FINAL-PROJECT-FRONT/src/components/HomePage/ContactsBar/ChatsList/index.tsx

import List from '@mui/material/List';
import ListItemButton from '@mui/material/ListItemButton';
import Avatar from '@mui/material/Avatar';
import ListItemText from '@mui/material/ListItemText';
import ListItemIcon from '@mui/material/ListItemIcon';
import { makeStyles, Typography } from '@material-ui/core'
import { useState } from 'react';
import  shortid  from 'shortid';

import doubleCheck from '../../../../img/clipart289625.png'
import { chats } from './chats'

const randomColor = () => "#" + Math.floor(Math.random() * 0xFFFFFF).toString(16);

const useStyles = makeStyles({
  list: {
    width: '100%',
    maxHeight: '890px',
    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: {},
  listItem_iconAvatar: {
    marginRight:10
  },
  listItem_iconRight: {
    marginRight: 10,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    alignContent: 'center',
    flexDirection: 'column'
  },
  listItem_iconTimeChecked: {
    display: 'flex',
    flexWrap: 'nowrap',
    alignItems: 'center',
    justifyContent: 'center',
    alignContent: 'center',
    marginBottom:2
  },
  listItem_iconRightBtn: {
    background: '#0ac40a',
    borderRadius: '50%',
    color: '#ffffff',
    border: 'none',
    height: 24,
    width: 24,
    textAlign: 'center',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    alignContent: 'center',
    fontSize: 12,
    marginLeft: 'auto',
    '&:hover': {
      outline: 'solid 3px #3ee415',
    }
  },
  listItem_icon_time: {
    fontSize: 12,
    marginLeft:5
  }
})

const  ChatsList = () => {
  const [selectedIndex, setSelectedIndex] = useState<number>(1);

  const classes = useStyles()

  const handleListItemClick = (e: React.SyntheticEvent<Element, Event>, i: number) => {
    console.log(i,'index','selected chat in chat bar',e)
    setSelectedIndex(i);
  }

  const handleNewMsgS = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, i: number) => {
    e.stopPropagation()
    console.log(i,'index','clicked read new messages')
  }
  
  const data = new Date(2022, 3, 8).toLocaleString("en-US", {
    year:'numeric',
    month: 'short',
    day: 'numeric'
  });

  return (
    <List className={classes.list} component="nav"
        aria-label="main mailbox folders">
         {chats && chats.map((chat: any,i:number) =>
          <ListItemButton
          className={classes.listItem}
          key={shortid.generate()}
          selected={selectedIndex === i}
          onClick={(e) => handleListItemClick(e, i)}
          >
          <ListItemIcon className={classes.listItem_iconAvatar}>
            <Avatar alt={chat.name} src={chat.avatarUrl?chat.avatarUrl:undefined}
              sx={{ background: randomColor(), width: 54, height: 54 }}/>
          </ListItemIcon> 
            <ListItemText primary={chat.name.slice(0,50)} secondary={chat.message.slice(0,35)} />
          <ListItemIcon className={classes.listItem_iconRight}>
               <div className={classes.listItem_iconTimeChecked}>
                 <img alt='double check' width="16" height='16' src={doubleCheck} />
                 <Typography  className={classes.listItem_icon_time} variant="h6"   color="initial">{data}</Typography>
               </div>
               <button onClick={(e) => handleNewMsgS(e,i)} className={classes.listItem_iconRightBtn}>17</button>
          </ListItemIcon>            
        </ListItemButton>)}
      </List>
  );
}

export default ChatsList