FINAL-PROJECT-FRONT/src/components/HomePage/RightBar/ChatBar/Messages/MessageLeftFile/index.tsx

import { makeStyles } from "@material-ui/core/styles";
import { IconButton } from "@material-ui/core";
import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
import FileDownloadIcon from '@mui/icons-material/FileDownload';
import { useState } from "react";
import { timeStampMessage } from '../../../../../../helpers'

const FileViewer =  require('react-file-viewer')

const useStyles = makeStyles({
  container: {
      display: "flex",
      justifyContent: "flex-start",
      width:'auto',
      maxWidth: '80%',
      marginBottom:15
  },
  wrapper: {
    position: 'relative',
    display: 'flex',
    justifyContent: 'space-between',
    alignContent: 'center',
    alignItems: 'center',
    width: 200,
    padding: '5px 5px 12px 5px',
    backgroundColor: '#ffffff',
    borderRadius: 7,
      "&:after": {
        content: "''",
        position: "absolute",
        width: "0",
        height: "0",
        borderBottom: "15px solid #ffffff",
        borderLeft: "15px solid transparent",
        borderRight: "15px solid transparent",
        bottom: '0px',
        left: "-15px"
      },
      "&:before": {
        content: "''",
        position: "absolute",
        width: "0",
        height: "0",
        borderBottom: "17px solid #ffffff",
        borderLeft: "16px solid transparent",
        borderRight: "16px solid transparent",
        bottom: "0px",
        left: "-17px"
      }     
  },
  bntDownload: {
    backgroundColor: '#ffffff',
    color: '#54b0fc',
    width: 30,
    height:30,
    '&:hover': {
      backgroundColor: '#54b0fc',
      color:'#ffffff'
    }
  },
  title: {
    margin: '0 30px 0 5px',
    color: '#0e0d0d',
    cursor: 'pointer',
    '&:hover': {
      color: '#54b0fc',
    }
  },
  time: {
      position: "absolute",
      fontSize: ".65em",
      fontWeight:600,
      bottom: 0,
      right: 6,
      color: '#414141',
      padding: 3,
      borderRadius: 5,
      zIndex:10
  },
  overlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height:'100%',
    zIndex: 100,
    backgroundColor: 'rgba(104, 105, 104, 0.6)',
    border: 'solid 1px rgba(179, 179, 179, 0.6)',
    overflowY: 'hidden'
  }, 
});

interface IMessageLeftFile {
  url:string,
  updatedAt: string,
}

const MessageLeftFile = ({ url,updatedAt }:IMessageLeftFile) => {
  const classes = useStyles();
  const [read,setRead] = useState<boolean>(false)
  const handleOpenRead = () => !read&&setRead(true)
  const handleCloseRead = () => read && setRead(false)

  return (
    <div className={classes.container}>
      {read&&<div className={classes.overlay} id='overlay' onClick={handleCloseRead}>
        <FileViewer
          allowFullScreen={true}
          fileType='pdf'
          filePath={url}
          onError={handleCloseRead}
         />
      </div>}
      <div className={classes.wrapper}>
        <InsertDriveFileIcon fontSize='large' style={{ color: '#99b401' }} />
        {!read && <span className={classes.title} onClick={handleOpenRead}>Read File</span>}
        <a href={url} target="_blank" rel="noreferrer" download>
           <IconButton className={classes.bntDownload}  >
             <FileDownloadIcon fontSize='medium'/>
           </IconButton>
        </a>
        <div className={classes.time}>{timeStampMessage(updatedAt)}</div>
      </div>
    </div>        
)};

export  default  MessageLeftFile