FINAL-PROJECT-FRONT/src/components/HomePage/CentralBar/ChatBar/SendMessage/ReplyBar/index.tsx

import { makeStyles } from "@material-ui/core/styles";
import CloseIcon from '@mui/icons-material/Close';
import ReplyIcon from '@mui/icons-material/Reply';
import MenuItem from '@mui/material/MenuItem';
import ListItemText from '@mui/material/ListItemText';
import LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
import ImageIcon from '@mui/icons-material/Image';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';

import { firstLetter,slicedWord } from "../../../../../../helpers";
import { TMessage } from "../../../../../../typescript/redux/messages/types";

const useStyles = makeStyles({   
  replyTop : {
    position: 'absolute',
    left: 0,
    top: '-7vh',
    height: '6vh',
    width: '100%',
    borderRadius: 8,
    display: 'flex',
    flexWrap: 'nowrap',
    alignContent: 'center',
    alignItems: 'center',
    color: '#6b6b6b',
    border:'solid 2px rgb(41, 139, 231)',
    backgroundColor: '#ffffff',
    padding: '0px 5px',
    zIndex:2,
  },
  replyIconClose: {
    cursor: 'pointer',
    marginLeft: 5,
    marginRight: 5,
    '&:hover': {
      color:'#f02a2a',
      transform: 'rotate(180deg)',
      transition: 'all 250ms ease-out ',
    }
  },
  replyListWrapper: {
    width: '100%',
  },
  replyColumn: {
    height: '80%',
    width: 2,
    backgroundColor: 'rgb(41, 139, 231)',
    marginRight:10
  },
  folderIcon: {
    color: '#54b0fc',
  },  
});

interface IReplyBar {
  isReply:TMessage,
  handleCloseReply: () => void,
  handleScrollToTheMessage:(_id:string) => void
}

const ReplyBar = ({ isReply, handleCloseReply,handleScrollToTheMessage }: IReplyBar) => {
  const classes = useStyles();
  
  return (
    <div className={classes.replyTop}>
      <ReplyIcon style={{margin:'0px 7px',color: "rgb(41, 139, 231)"}}/>
      <div className={classes.replyColumn}></div>
        <ul className={classes.replyListWrapper}>
          <MenuItem onClick={() => handleScrollToTheMessage(isReply._id)}>
            <ListItemText
              primary={`${firstLetter(isReply.name)}${slicedWord(isReply.name, 15, 1)} 
              ${firstLetter(isReply.lastName)}${slicedWord(isReply.lastName, 15, 1)}`}
              primaryTypographyProps={{ color: "rgb(41, 139, 231)",fontSize:16 }}
              secondary={`Type : ${isReply.type.toUpperCase()}`}
              secondaryTypographyProps={{ fontSize: 16 }} />
            {isReply.type === 'text' &&<ContentCopyIcon className={classes.folderIcon} fontSize='large' />}
            {isReply.type === 'audio' &&<LibraryMusicIcon className={classes.folderIcon} fontSize='large' />}
            {isReply.type === 'video' &&<VideoLibraryIcon className={classes.folderIcon} fontSize='large' />}
            {isReply.type === 'image' &&<ImageIcon className={classes.folderIcon} fontSize='large' />}
            {isReply.type === 'pdf'&&<InsertDriveFileIcon className={classes.folderIcon} fontSize='large' />}         
            {isReply.type === 'docx'&&<InsertDriveFileIcon className={classes.folderIcon} fontSize='large' />}
          </MenuItem>
        </ul>
        <CloseIcon onClick={handleCloseReply} className={classes.replyIconClose} />
    </div>
  )
}

export default ReplyBar