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

import { makeStyles } from "@material-ui/core/styles";
import { useDispatch } from "react-redux";
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";
import { asyncGetChatById } from '../../../../../../redux/chat/operations'
import { actionRightIsOpen, actionOpenPinned } from '../../../../../../redux/control/action'

const useStyles = makeStyles({   
  forwardTop : {
    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,
  },
  forwardIconClose: {
    cursor: 'pointer',
    marginLeft: 5,
    marginRight: 5,
    '&:hover': {
      color:'#f02a2a',
      transform: 'rotate(180deg)',
      transition: 'all 250ms ease-out ',
    }
  },
  forwardListWrapper: {
    width: '100%',
  },
  forwardColumn: {
    height: '80%',
    width: 2,
    backgroundColor: 'rgb(41, 139, 231)',
    marginRight:10
  },
  folderIcon: {
    color: '#54b0fc',
  },  
});

interface IForwardBar {
  companionId: string,
  isForward:TMessage,
  handleCloseForward: () => void,
  handleScrollToTheMessage: (_id: string) => void,
  setIsForward: React.Dispatch<React.SetStateAction<TMessage | undefined>>,
}

const ForwardBar = ({ companionId,isForward, handleCloseForward,handleScrollToTheMessage,setIsForward }: IForwardBar) => {
  const classes = useStyles();
  const dispatch = useDispatch()
  
  const handleScrollHereOrBack = () => {
    if (companionId === isForward.companionId) return handleScrollToTheMessage(isForward._id)
    setIsForward(undefined)
    dispatch(actionRightIsOpen(''))
    dispatch(actionOpenPinned(false))
    dispatch(asyncGetChatById(isForward.companionId))
    setTimeout(() => handleScrollToTheMessage(isForward._id), 2000)
  }
  
  return (
    <div className={classes.forwardTop}>
      <ReplyIcon style={{margin:'0px 7px',color: "rgb(41, 139, 231)",transform :'rotateY(180deg)'}} />
      <div className={classes.forwardColumn}></div>
        <ul className={classes.forwardListWrapper}>
          <MenuItem onClick={handleScrollHereOrBack}>
            <ListItemText
              primary={`${firstLetter(isForward.name)}${slicedWord(isForward.name, 15, 1)} 
              ${firstLetter(isForward.lastName)}${slicedWord(isForward.lastName, 15, 1)}`}
              primaryTypographyProps={{ color: "rgb(41, 139, 231)",fontSize:16 }}
              secondary={`Type : ${isForward.type.toUpperCase()}`}
              secondaryTypographyProps={{ fontSize:16 }}/>    
            {isForward.type === 'text' &&<ContentCopyIcon className={classes.folderIcon} fontSize='large' />}
            {isForward.type === 'audio' &&<LibraryMusicIcon className={classes.folderIcon} fontSize='large' />}
            {isForward.type === 'video' &&<VideoLibraryIcon className={classes.folderIcon} fontSize='large' />}
            {isForward.type === 'image' &&<ImageIcon className={classes.folderIcon} fontSize='large' />}
            {isForward.type === 'pdf'&&<InsertDriveFileIcon className={classes.folderIcon} fontSize='large' />}         
            {isForward.type === 'docx'&&<InsertDriveFileIcon className={classes.folderIcon} fontSize='large' />}      
          </MenuItem>
        </ul>
        <CloseIcon onClick={handleCloseForward} className={classes.forwardIconClose} />
    </div>
  )
}

export default ForwardBar