FINAL-PROJECT-FRONT/src/components/HomePage/CentralBar/ChatBar/Messages/MessageLeftImage/index.tsx

import { makeStyles } from "@material-ui/core/styles";
import { styled } from '@mui/material/styles';
import { useState } from "react";
import DownloadForOfflineIcon from '@mui/icons-material/DownloadForOffline';
import { IconButton } from "@material-ui/core";
import ImageIcon from '@mui/icons-material/Image';
import FileDownloadIcon from '@mui/icons-material/FileDownload';
import Button from '@mui/material/Button';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { removeMessageById } from "../../../../../../api-data";
import { timeStampMessage, timeStampEU,handleDownload,copied } from '../../../../../../helpers'

const StyledMenu = styled((props:any) => (
  <Menu
    elevation={0}
    anchorOrigin={{
      vertical: 'top',
      horizontal: 'right',
    }}
    transformOrigin={{
      vertical: 'bottom',
      horizontal: 'right',
    }}
    {...props}
  />
))(({ theme }:any) => ({
  '& .MuiPaper-root': {
    borderRadius: 10,
    marginTop: theme.spacing(0),
    minWidth: 220,
    color:
      theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[500],
    boxShadow:
      'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
    '& .MuiMenu-list': {
       padding: '4px 4px',
    },
    '& .MuiMenuItem-root': {
      marginBottom: theme.spacing(1),
      '& .MuiSvgIcon-root': {
        fontSize: 21,
        color: theme.palette.text.secondary,
        marginRight: theme.spacing(2),
      }
    },
  },
}));

const useStyles = makeStyles({
    container: {
      display: "flex",
      justifyContent: "flex-start",
      marginBottom:15
  },
  wrapper: {
    width: 400,
    position: 'relative',
    display: 'flex',
    alignItems: 'center',
    alignContent: 'center',
    justifyContent: 'space-between',
    borderRadius: 7,
    padding: '12px 5px 18px 5px',
    backgroundColor: '#ffffff',
      "&: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"
      }     
  },
  wrapperActive: {
    width: 400,
    position: 'relative',
    display: 'flex',
    alignItems: 'center',
    alignContent: 'center',
    justifyContent: 'space-between',
    borderRadius: 7,
    padding: '12px 5px 18px 5px',
    backgroundColor: '#babdbc',
      "&:after": {
        content: "''",
        position: "absolute",
        width: "0",
        height: "0",
        borderBottom: "15px solid #babdbc",
        borderLeft: "15px solid transparent",
        borderRight: "15px solid transparent",
        bottom: '0px',
        left: "-15px"
      },
      "&:before": {
        content: "''",
        position: "absolute",
        width: "0",
        height: "0",
        borderBottom: "17px solid #babdbc",
        borderLeft: "16px solid transparent",
        borderRight: "16px solid transparent",
        bottom: "0px",
        left: "-17px"
      }     
  },  
    image: {
      borderRadius: 7,
      width: 300,
      maxHeight: 400,
      cursor: 'pointer',
    },  
    time: {
      position: "absolute",
      fontSize: ".65em",
      fontWeight:600,
      bottom: 0,
      right: 6,
      color: '#414141',
      padding: 3,
      borderRadius: 5,
  },
    caption: {
      position: "absolute",
      fontSize: ".65em",
      fontWeight:600,
      bottom: 0,
      left: 6,
      color: '#000000',
      padding: 3,
      borderRadius: 5,
  },    
  bntDownload: {
    backgroundColor: 'inherit',
    color: '#54b0fc',
    width: 30,
    height:30,
    '&:hover': {
      backgroundColor: '#54b0fc',
      color:'#ffffff'
    }
  },    
   overlay: {
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100vw',
    height: '100vh',
    zIndex: 100,
    backgroundColor: 'rgba(104, 105, 104, 0.6)',
    overflowY: 'hidden',
    boxSizing: 'border-box',
    display: 'flex',
    justifyContent: 'center',
    alignContent: 'center',
    alignItems: 'center'
  },
  wrapperOverlayImg: {
    width: '30%',
    maxHeight: '80%',
    position: 'relative',
    display: 'flex',
  },
  overlayDownloadIcon: {
    position: 'absolute',
    content: '',
    right: 0,
    top: -40,
    cursor: 'pointer',
    color: '#e9e7e7',
    padding: 0,
    borderRadius: '50%',
    '&:hover': {
      backgroundColor: '#ffffff',
      color: '#b8b7b7',
    }
  },
  overlayTime: {
    position: 'absolute',
    content: '',    
    color: '#ffffff',
    top: -30,
    left: 0,
    borderRadius: 10,
    padding:'2px 6px 2px 6px',
    backgroundColor:'#707070'
  },  
  modalDelete: {
    background: '#ffffff',
    position: 'absolute',
    content:'',
    width: '20%',
    height:'auto',
    left: '40%',
    bottom: '48.5%',
    borderRadius: 10,
    padding: 10,
    display: 'flex',
    flexDirection:'column'
  },  
  overlayDelete: {
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100vw',
    height: '100vh',
    zIndex: 100,
    backgroundColor: 'rgba(104, 105, 104, 0.6)',
    overflowY: 'hidden',
  },   
});

interface IMessagesLeftImage {
  url:string,
  createdAt:string,
  color: string,
  message: string,
  messages: any,
  fullType: string,
  caption :string,
  _id:string
}

const MessagesLeftImage = ({url,createdAt,color,message,messages,fullType,caption,_id}:IMessagesLeftImage) => {
  const classes = useStyles();
  const [watch, setWatch] = useState<boolean>(false)
  const [anchorEl, setAnchorEl] = useState<any>(null);
  const [selected, setSelected] = useState<boolean>(false);
  const [modal,setModal] = useState<boolean>(false)
  const open = Boolean(anchorEl);    
  const handleOpenWatch = () => !watch&&setWatch(true)
  const handleCloseWatch = (e:any) => e.target.id === 'overlay'&&watch&&setWatch(false)
  const handleClose = (type: string | undefined): void => {
    if (type === 'copy') copied('Link')
    if (type === 'delete') setModal(true)
    setAnchorEl(null)
    setSelected(false)
  }

  const handleDeleteModal = (e: any) => {
    const id = e.target.id
    if (id === 'overlay' || id === 'cancel') return setModal(false)
    if (id === 'delete') {
      removeMessageById(_id)
      setModal(false)
    }
  }  
  const handleContextMenu = (e: React.MouseEvent<HTMLDivElement>):void => {
    e.preventDefault()
    setAnchorEl(e.currentTarget)
    setSelected(true)
  }   
  return (watch ?
    <div onClick={handleCloseWatch} id='overlay' className={classes.overlay}>
      <div className={classes.wrapperOverlayImg}>
        <span className={classes.overlayTime}>{timeStampEU(createdAt)}</span>
        <DownloadForOfflineIcon className={classes.overlayDownloadIcon} fontSize='large'
         onClick={() => handleDownload(url, fullType)}/>
        <img width='100%' height='auto' alt='imageItem' src={url} />
       </div>
    </div>  :
    <div className={classes.container}>
      <div onContextMenu={(e) => handleContextMenu(e)}
        className={selected? classes.wrapperActive:classes.wrapper}>
        <ImageIcon fontSize='large' style={{ color: '#bd9a00' }} />
        <img onClick={handleOpenWatch} className={classes.image} alt='message pic' src={url}
          style={{ backgroundColor: url ? '' : color }} width='300' height='400' />
        <IconButton onClick={() => handleDownload(url, fullType)} className={classes.bntDownload}  >
            <FileDownloadIcon fontSize='medium'/>
        </IconButton>       
        <div className={classes.time}>{timeStampMessage(createdAt)}</div>
        <div className={classes.caption}>{caption}</div>
      <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
        anchorEl={anchorEl} open={open} onClose={handleClose}>        
        <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
          <MenuItem>
            <ContentCopyIcon />
             Copy Image link
          </MenuItem>
        </CopyToClipboard>
        <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
            <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
            Delete message
        </MenuItem>        
      </StyledMenu>
      {modal &&
      <div onClick={handleDeleteModal} className={classes.overlayDelete} id='overlay'>
        <div className={classes.modalDelete}>
          <h3 style={{color: '#2c2c2c'}}>Delete message</h3>
          <p style={{ color: '#050505' }}>Are you sure you want to delete message?</p>
          <Button id='delete' variant="text" color="error" style={{fontWeight:500,fontSize:22}}>
            DELETE MESSAGE
          </Button>         
          <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:22}}>
             CANCEL
          </Button>
        </div>  
      </div>}        
      </div>
    </div>   
)};

export  default  MessagesLeftImage