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

import { makeStyles } from "@material-ui/core/styles";
import SendIcon from '@mui/icons-material/Send';
import MicNoneIcon from '@mui/icons-material/MicNone';
import VideocamIcon from '@mui/icons-material/Videocam';
import PauseIcon from '@mui/icons-material/Pause';
import AttachFileIcon from '@mui/icons-material/AttachFile';
import SentimentSatisfiedAltIcon from '@mui/icons-material/SentimentSatisfiedAlt';
import CloseIcon from '@mui/icons-material/Close';
import PhotoCameraFrontIcon from '@mui/icons-material/PhotoCameraFront';
import CommentIcon from '@mui/icons-material/Comment';
import Avatar from '@mui/material/Avatar';
import Webcam from "react-webcam";
import CameraIcon from '@mui/icons-material/Camera';
import TextField from '@mui/material/TextField';
import Picker from 'emoji-picker-react';
import InputAdornment from '@mui/material/InputAdornment';

import { useReactMediaRecorder } from "react-media-recorder";
import { useState,useEffect,useCallback } from "react";
import { useSelector } from "react-redux";

import FilesMenu from "./FilesMenu";
import ReplyBar from './ReplyBar'
import ForwardBar from "./ForwardBar";
import ForwardSearchList from "./ForwardSearchList";
import {
    sentMessageById, sentImgMessageById, sentAudioMessageById,
    sentVideoMessageById,sentFileMessageById,sentMessageReplyById,sentMessageForwardById
} from '../../../../../api-data'
import { getChat } from '../../../../../redux/chat/selector'
import { getRightIsOpen } from '../../../../../redux/control/selector'
import { playNotification,prodBaseURL } from "../../../../../helpers";
import { typingChat } from "../../../../../api-data";
import { TMessage } from "../../../../../typescript/redux/messages/types";


const useStyles = makeStyles({   
  container: {
    width: '35vw',
    height:'6vh',
    position: 'fixed',
    bottom: '2vh',
    borderRadius: 8,
    padding: 10,
    display: 'flex',
    flexWrap: 'nowrap',
    alignContent: 'start',
    alignItems: 'start',
    color: '#6b6b6b',
    border:'solid 2px #ffffff',
    backgroundColor: '#ffffff',        
  },
  containerActive: {
    width: '35vw',
    height:'6vh',
    position: 'fixed',
    bottom: '2vh',
    borderRadius: 8,
    padding: 10,
    display: 'flex',
    flexWrap: 'nowrap',
    alignContent: 'start',
    alignItems: 'start',
    border:'solid 2px rgb(41, 139, 231)',
    backgroundColor: '#ffffff',        
  },    
  textarea: {
    width: '100%',
    height: '100%',
    outline: 'none',
    border:'none',
    padding: '0px 10px',
    marginLeft: 8,
    marginRight: 8,
    overflowY:'auto',
    resize: 'none',
    '&::placeholder': {
      color: 'inherit',
      fontWeight: 600,
      fontSize:20
    },
 },
  attachIcon: {
    transform:'rotate(30deg)',  
  },
  borderTop: {
    position: 'absolute',
    left: 0,
    top: -21,
    width: '100%',
    height: 1,
    background:'#ffffff',
  },
  filesMenu: {
    background: '#fdfdfd',
    position: 'absolute',
    width: '15vw',
    maxWidth: '100%',
    left: '61%',
    bottom:'9vh',
    zIndex: 10,
    visibility: 'visible',
    borderRadius: 10,
    padding: '4px 6px',
  },
  emoji: {
    position: 'absolute',
    zIndex: 10,
    visibility: 'visible',
  },
  captionTextField: {
    zIndex: 10,
    visibility: 'visible',  
    width: '35vw',
    backgroundColor: '#ffffff',
    borderRadius:4,
  },
  iconCancel: {
        position: 'absolute',
        left: -72,
        bottom:-1,
        display:'flex',
        backgroundColor: '#ffffff',
        color: 'rgb(243, 69, 69)',
        border:'solid 4px rgb(243, 69, 69)',
        borderRadius: '50%',
        '&:hover': {
            backgroundColor: 'rgb(243, 69, 69)',
            color: '#ffffff',
        }
    },    
    avatarCamera: {
        position: 'absolute',
        left: -72,
        bottom:-1,
        display: 'flex',
        borderRadius: '50%',
        zIndex: 10,
        border: 'solid 14px #ffffff',
        '&:hover': {
            backgroundColor: 'rgb(41, 139, 231)',
            border:'solid 14px rgb(41, 139, 231)',
            color: '#ffffff',
        }
    },
    avatarRight: {
        position: 'absolute',
        right: -72,
        bottom:-1,
        display: 'flex',
        borderRadius: '50%',
        zIndex: 10,
        border: 'solid 14px #ffffff',
        '&:hover': {
            backgroundColor: 'rgb(41, 139, 231)',
            border:'solid 14px rgb(41, 139, 231)',
            color: '#ffffff'
        }
    },
    pauseLeft: {
        position: 'absolute',
        left: -72,
        bottom:-1,
        zIndex: 10,     
    },
    pauseRight: {
        position: 'absolute',
        right: -72,
        bottom:-1,
        zIndex: 10,   
    },    
    avatarPause: {
        backgroundColor: '#ffffff',
        cursor: 'pointer',
        animation: `$shake 1s`,
        animationIterationCount:'infinite',
        '&:hover': {
            backgroundColor: 'rgb(41, 139, 231)',
            color: '#ffffff',
        }
    },
  overlay: {
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100vw',
      height: '100vh',
      zIndex:100
    },
   ringContainerLeft: {
    position: 'absolute',
    left: -25,
    top: -25,
    zIndex: 10,
  },   
  ringContainerRight: {
    position: 'absolute',
    right: -25,
    top: -25,
    zIndex: 10,
  },
  circle: {
    width: 15,
    height: 15,
    backgroundColor: 'rgb(255, 4, 4)',
    borderRadius: '50%',
    position: 'relative'
    },
  ringRing: {
    border: '3px solid rgb(255, 4, 4)',
    borderRadius: '50%',
    height: 25,
    width: 25,
    position: 'absolute',
    right: -5,
    top: -5,
    animation: `$pulsate 1s ease-out`,
    animationIterationCount: 'infinite',
    opacity: 0
    },
   '@keyframes pulsate': {
    '0%': {transform: 'scale(0.1, 0.1)', opacity: 0},
    '50%': { opacity: 1},
    '100%': {transform: 'scale(1.2, 1.2)', opacity: 0},
    },
  '@keyframes shake': {
  '0%': { transform: 'translate(0.5px, 0.5px) rotate(0deg)'},
  '10%': { transform: 'translate(-0.5px, -1px) rotate(-1deg)'},
  '20%': { transform: 'translate(-1.5px, 0px) rotate(1deg)'},
  '30%': { transform: 'translate(1.5px, 1px) rotate(0deg)'},
  '40%': { transform: 'translate(0.5px, -0.5px) rotate(1deg)'},
  '50%': { transform: 'translate(-0.5px, 1px) rotate(-1deg)'},
  '60%': { transform: 'translate(-1.5px, 0.5px) rotate(0deg)'},
  '70%': { transform: 'translate(1.5px, 0.5px) rotate(-1deg)'},
  '80%': { transform: 'translate(-0.5px, -0.5px) rotate(1deg)'},
  '90%': { transform: 'translate(0.5px, 1px) rotate(0deg)'},
  '100%': { transform: 'translate(0.5px, -1px) rotate(-1deg)'},
  },
  overlayCamera: {
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100vw',
    height: '100vh',
    zIndex: 100,
    backgroundColor: 'rgba(104, 105, 104, 0.6)',
    overflowY: 'hidden',
    display: 'flex',
    justifyContent: 'center',
    alignContent: 'center',
    alignItems: 'center',
    flexDirection:'column'
  },
  capturedPicture: {
    borderRadius: 10,
    border:'solid 2px rgb(62, 149, 231)'
  },  
  capturePhoto: {
    color: '#ffffff',
    cursor: 'pointer',
    '&:hover': {
      color: '#48ff00',
      animation: `$rotating 2s linear infinite`
    },
  },  
  '@keyframes rotating': {
	  'from': { transform: 'rotate(0deg)'},
	  'to': { transform: 'rotate(360deg)'},
   },  
});

interface ISendMessage{
  isArrow: boolean,
  silentMode: boolean,
  isReply:TMessage | undefined,
  setIsReply: React.Dispatch<React.SetStateAction<TMessage | undefined>>,
  isForward: TMessage | undefined,
  setIsForward: React.Dispatch<React.SetStateAction<TMessage | undefined>>,
  modalForward: boolean,
  setModalForward: React.Dispatch<React.SetStateAction<boolean>>,
  handleScrollToTheMessage: (_id: string) => void,
}

const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForward,modalForward,setModalForward,handleScrollToTheMessage }:ISendMessage) => {
    const classes = useStyles();
    const { companionId } = useSelector(getChat)
    const rightIsOpen = useSelector(getRightIsOpen)
    const [value, setValue] = useState<string>('')
    const [file, setFile] = useState<any>(false)
    const [caption, setCaption] = useState<string>('')
    const [isOpenCaption, setIsOpenCaption] = useState<boolean>(false)
    const [isOpenMenu, setIsOpenMenu] = useState<boolean>(false)
    const [isOpenEmoji, setIsOpenEmoji] = useState<boolean>(false)
    const [isOpenCaptionEmoji, setIsOpenCaptionEmoji] = useState<boolean>(false)
    const [isRecording, setIsRecording] = useState<boolean>(false)
    const [isFilming, setIsFilming] = useState<boolean>(false)
    const [isOpenCamera, setIsOpenCamera] = useState<boolean>(false)
    const [type, setType] = useState<string>('')
    const [status, setStatus] = useState<string | null>(null)
    const [_status, _setStatus] = useState<string | null>(null)
    const { startRecording, stopRecording, mediaBlobUrl, clearBlobUrl, } = useReactMediaRecorder({ audio: true,blobPropertyBag:{type: "audio/mp3"}});
    const { startRecording: _startRecording, stopRecording: _stopRecording,
      mediaBlobUrl: _mediaBlobUrl, clearBlobUrl: _clearBlobUrl } = useReactMediaRecorder({ video: true, blobPropertyBag: { type: "video/mp4" } });
    const videoConstraints = {
      width: 1280,
      height: 720,
      facingMode: "user"
    };
    const onEmojiClick = (_e: any, emojiObject: any, flag: string) => {
      if (flag === 'input') {
        setValue(prevValue => prevValue + emojiObject.emoji)
        setIsOpenEmoji(false)
      }
      if (flag ==='caption') {
        setCaption(prevValue => prevValue + emojiObject.emoji)
        setIsOpenCaptionEmoji(false)
      }        
    };    
    const clearMessage = () => {
      setFile(false)
      setIsRecording(false)
      setIsFilming(false)
      setValue('')
      setCaption('')
      setType('')
      clearBlobUrl()
      _clearBlobUrl()
      setIsOpenMenu(false)
      setIsOpenEmoji(false)
      setIsOpenCaption(false)
      setIsOpenCaptionEmoji(false)
      setStatus(null)
      _setStatus(null)
   }

    const sentMessage = async () => {
        if (value && !isReply && !isForward) sentMessageById(companionId, value, caption.trim())
        if (value && isReply && !isForward) {
           sentMessageReplyById(isReply._id, value, caption.trim())
           setIsReply(undefined)
        }
        if (value&&!isReply && isForward) {
           sentMessageForwardById(isForward._id,isForward.companionIdForwardToAndFrom,value,caption.trim())
           setIsForward(undefined)
        }      
        if (mediaBlobUrl && type === 'recording') {
            const audio = new XMLHttpRequest();
            audio.open('GET', mediaBlobUrl, true);
            audio.responseType = 'blob';
            audio.onload = () => {
            if (audio.status === 200) {
                const blob = audio.response
                const file = new File([blob], 'audio.mp3', {
                  type: 'audio/mpeg'
                })
                const formData: any = new FormData()
                formData.append("audio", file)
                sentAudioMessageById(companionId, formData,caption.trim())
                clearBlobUrl()
               }
            }
            audio.send();
        }
        if (_mediaBlobUrl && type === 'filming') {
            const video = new XMLHttpRequest();
            video.open('GET', _mediaBlobUrl, true);
            video.responseType = 'blob';
            video.onload = () => {
            if (video.status === 200) {
                const blob = video.response
                const file = new File([blob], 'video.mp4',{
                  type: "video/mp4"
                })
                const formData: any = new FormData()
                formData.append("video", file)
                sentVideoMessageById(companionId, formData,caption.trim())
                _clearBlobUrl()
                }
            }
            video.send();
        }        
      if (file && type && type !== 'base64') {         
            if (file.type.includes('image') && type === 'content') {
              const formData: any = new FormData()
              formData.append("image", file);
              sentImgMessageById(companionId, formData, caption.trim())
            }
            if (file.type.includes('audio') && type === 'content') {
              const formData: any = new FormData()
              formData.append("audio", file);
              sentAudioMessageById(companionId, formData,caption.trim())
            }           
            if (file.type.includes('video') && type === 'content') {
              const formData: any = new FormData()
              formData.append("video", file);
              sentVideoMessageById(companionId, formData,caption.trim())                
            }
            if (file.type.includes('application') && type === 'application') {
              const formData: any = new FormData()
              formData.append("file", file);
              sentFileMessageById(companionId, formData,caption.trim())   
            }        
      }
      if (typeof file === 'string' && type === 'base64') {
        fetch(file).then(res => res.blob()).then(blob => {
          const imgFile = new File([blob], "selfie", { type: "image/jpeg" })
          const formData: any = new FormData()
          formData.append("image", imgFile);
          sentImgMessageById(companionId, formData, caption.trim())
        })
      }         
        clearMessage()
        !silentMode&&playNotification(`${prodBaseURL}/send.mp3`)
    }    
    const handleTextarea = (e: React.ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)
    const handleTextareaCaption = (e: React.ChangeEvent<HTMLTextAreaElement>) => setCaption(e.target.value)
    const handleFocusTextarea = async () => await typingChat(companionId,true)
    const handleBlurTextarea = async () => await typingChat(companionId,false) 
    const handleOpenFileMenu = () => !isOpenMenu&&setIsOpenMenu(true)
    const handleCloseFileMenu = (e:any) => e.target.id === 'overlay'&&isOpenMenu&&setIsOpenMenu(false) 
    const handleOpenEmoji = () => !isOpenEmoji && setIsOpenEmoji(true)
    const handleCloseEmoji = (e: any) => e.target.id === 'overlay' && isOpenEmoji && setIsOpenEmoji(false)
    const handleOpenCaptionEmoji = () => !isOpenEmoji && setIsOpenCaptionEmoji(true)
    const handleOpenCaption = () => !isOpenCaption && setIsOpenCaption(true)
    const handleCloseCaption = (e: any) => {
      if (e.target.id === 'overlay') {
        if(isOpenCaptionEmoji) return setIsOpenCaptionEmoji(false)
        isOpenCaption && setIsOpenCaption(false)
      }
    } 
    const handleRecording = () => {
      if (isRecording) {
          setStatus('stopped')
          stopRecording()
          return 
        }
        startRecording()
        setStatus('recording')
        setType('recording')
        setIsRecording(true) 
    }
    const handleFilming = () => {
        if (isFilming) {
          _setStatus('stopped')
          _stopRecording()
          return 
        }
        _startRecording()
        _setStatus('recording')
        setType('filming')
        setIsFilming(true) 
  }
  const handleOpenCamera = () => setIsOpenCamera(true)

  const handleCloseCamera = (e: any) => {
    const id = e.target.id
    if (id === 'overlay') setIsOpenCamera(false)
  }
  
  const handleCaptureAvatar = (getScreenshot:() => string| null) => {
    setFile(getScreenshot())
    setType('base64')
    !silentMode&&playNotification(`${prodBaseURL}/cameraCapture.mp3`)
  }

  const handleCloseReply = () => {
    setIsReply(undefined)
    clearMessage()
  }

  const handleCloseForward= () => {
    setIsForward(undefined)
    clearMessage()
  }  

  const defaultState = useCallback(() => {
    stopRecording()
    _stopRecording()
    clearBlobUrl()
    _clearBlobUrl()
    setStatus(null)
    _setStatus(null)
    setIsRecording(false)
    setIsFilming(false)     
    setFile(false)
    setValue('')
    setCaption('')
    setType('')
    setIsOpenMenu(false)
    setIsOpenEmoji(false)
    setIsOpenCaption(false)
    setIsOpenCaptionEmoji(false)
  },[_clearBlobUrl,clearBlobUrl,_stopRecording,stopRecording])

  useEffect(() => {
    defaultState()
  }, [isReply, isForward, companionId])
  
  useEffect(() => {
    setIsReply(undefined)
  }, [companionId, setIsReply])
  
  useEffect(() => {
    const companionIdForwardToAndFrom = isForward?.companionIdForwardToAndFrom
    if(companionIdForwardToAndFrom&&companionIdForwardToAndFrom !== companionId) setIsForward(undefined)
  },[companionId])  
  
    return (
        <div className={value || file || status === 'stopped' || _status === 'stopped' ?classes.containerActive:classes.container}>
          {isArrow && <div className={classes.borderTop}></div>}
          {isReply && <ReplyBar isReply={isReply} handleCloseReply={handleCloseReply}
            handleScrollToTheMessage={handleScrollToTheMessage} />}
          {isForward && modalForward && <ForwardSearchList setModalForward={setModalForward}
            setIsForward={setIsForward} companionId={companionId}/>}
          {isForward && !modalForward && <ForwardBar companionId={companionId} 
            isForward={isForward} handleCloseForward={handleCloseForward}
            handleScrollToTheMessage={handleScrollToTheMessage} setIsForward={setIsForward}/>}
            {isFilming && _status !== 'stopped' &&                
             <>
                <div className={classes.pauseLeft}>
                  <Avatar onClick={handleFilming } className={classes.avatarPause}
                     sx={{backgroundColor: '#ffffff',color:'#6b6b6b',width: 56, height: 56}}>
                    <PauseIcon fontSize="large"/>                    
                   </Avatar>                    
                </div>
                <div className={classes.ringContainerLeft}>
                  <div className={classes.ringRing}></div>
                  <div className={classes.circle}></div>         
                </div>
             </>}            
            {isRecording && status !== 'stopped' &&                
             <>             
                <div className={classes.pauseRight}>
                   <Avatar onClick={handleRecording} className={classes.avatarPause}
                     sx={{backgroundColor: '#ffffff',color:'#6b6b6b',width: 56, height: 56}}>
                     <PauseIcon fontSize="large"/>                    
                   </Avatar>                    
                </div>                             
                <div className={classes.ringContainerRight}>
                  <div className={classes.ringRing}></div>
                  <div className={classes.circle}></div>         
                </div>
                </>}            
                <CloseIcon onClick={clearMessage} fontSize="small" className={classes.iconCancel}
                    sx={{width: 56, height: 56, display: file || value || (status === 'stopped'&&type)
                    || (_status === 'stopped'&&type) ? 'inline-block' : 'none'}} />
                <VideocamIcon onClick={handleFilming} className={classes.avatarCamera}
                    sx={{backgroundColor: '#ffffff', color: '#6b6b6b', width: 56, height: 56}}
                    style={{ display: status !== null || _status === 'stopped' || file || value || isFilming || isReply || isForward? 'none' : 'block' }} />                           
                <SendIcon onClick={sentMessage} className={classes.avatarRight} 
                    sx={{backgroundColor: '#ffffff',color: 'rgb(41, 139, 231)', width: 56, height: 56}}
                    style={{display: value || file || status === 'stopped'  || _status === 'stopped'? 'block':'none' }}/>                
                <MicNoneIcon onClick={handleRecording} className={classes.avatarRight} 
                    sx={{backgroundColor:'#ffffff',color: '#6b6b6b', width: 56, height: 56}}
                    style={{display: !value && !file && status !== 'stopped' && _status === null&&!isRecording && !isReply && !isForward ? 'block' : 'none'}}/>
                <SentimentSatisfiedAltIcon onClick={handleOpenEmoji} 
                    fontSize='medium' sx={{color: isOpenEmoji ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
                    pointerEvents: file || status || _status ? 'none' : "auto",
                        '&:hover': { color: 'rgb(41, 139, 231)' }, marginRight:1}}/>
                <CommentIcon onClick={handleOpenCaption} 
                    fontSize='medium' sx={{color: isOpenCaption || caption ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
                    pointerEvents: value || file || status === 'stopped' || _status === 'stopped'? 'auto' : "none",
                    '&:hover': { color: 'rgb(41, 139, 231)'}}} />
                <div onClick={handleCloseEmoji} className={classes.overlay} id='overlay'
                  style={{ display: isOpenEmoji ? 'block':'none'}}>
                   <div className={classes.emoji} style={{left: rightIsOpen?'32.5vw':'45vw',bottom:'9vh'}}>
                      <Picker onEmojiClick={(e,obj) => onEmojiClick(e,obj,'input')} />
                   </div>  
                </div>
                <div onClick={handleCloseCaption} className={classes.overlay} id='overlay'
                  style={{ display: isOpenCaption ? 'block' : 'none' }}>
                   {isOpenCaptionEmoji && <div className={classes.emoji}
                      style={{ left: rightIsOpen ? '32.5vw' : '45vw',bottom:isReply || isForward?'23vh':'16vh' }}>
                      <Picker onEmojiClick={(e,obj) => onEmojiClick(e,obj,'caption')} />
                   </div>}          
                   <TextField className={classes.captionTextField} onChange={handleTextareaCaption}
                    style={{ left: rightIsOpen ? '32.5vw' : '45vw', top: isReply || isForward?'78.5vh':'85vh' }}
                    placeholder='Caption' value={caption} id="caption" name='caption' variant='outlined'
                    InputProps={{
                      startAdornment: (<InputAdornment position="start">
                        <SentimentSatisfiedAltIcon onClick={handleOpenCaptionEmoji}
                          sx={{color: isOpenCaptionEmoji ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
                        '&:hover': { color: 'rgb(41, 139, 231)' }}} />
                    </InputAdornment>
                  ),}}/>
                </div>
                <textarea disabled={file || type === 'recording' || type === 'filming'? true : false} value={value} onBlur={handleBlurTextarea}
                    onFocus={handleFocusTextarea} onChange={handleTextarea} className={classes.textarea}
                    placeholder={file ? 'The File is ready to send' : status === null && _status === null ? 'Message' :
                    `${status === 'stopped' || _status === 'stopped' ? type === 'recording' || type === 'filming'?'Recorded':'Message':'Recording in progress...'}`} rows={1}
                    style={{color:value || file || type === 'recording' || type === 'filming' ?'rgb(41, 139, 231)':'#6b6b6b'}}>
                </textarea>
                <PhotoCameraFrontIcon onClick={handleOpenCamera} fontSize='medium'
                 sx={{color: isOpenCamera || type === 'base64' ? 'rgb(62, 149, 231)' : '#6b6b6b', marginRight: 1, cursor: 'pointer',
                   pointerEvents: type === 'content' || type === 'application' || value || status !== null
                   || _status !== null || isReply || isForward ? 'none' : "auto",
                  '&:hover': { color: 'rgb(41, 139, 231)'}}}/>
                <AttachFileIcon onClick={handleOpenFileMenu} className={classes.attachIcon}
                  fontSize='medium' sx={{color: isOpenMenu || type === 'content' || type === 'application' ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
                    pointerEvents: type === 'base64' || value || status !== null || _status !== null || isReply || isForward? 'none' : "auto", '&:hover':
                    { color: 'rgb(41, 139, 231)'}}}/>
                <div onClick={handleCloseFileMenu} className={classes.overlay} id='overlay'
                    style={{ display: isOpenMenu ? 'block':'none'}}>
                    <div className={classes.filesMenu} style={{left: rightIsOpen?'52.5vw':'65vw'}}>
                      <FilesMenu setFile={setFile} setValue={setValue} setIsOpenMenu={setIsOpenMenu} setType={setType} type={type}/>
                    </div>
                </div>
                   {isOpenCamera &&
                    <div onClick={handleCloseCamera} id='overlay' className={classes.overlayCamera}>
                      <Webcam audio={false} screenshotFormat="image/jpeg" width='40%'
                      videoConstraints={videoConstraints} style={{marginBottom:30}}>
                     {({ getScreenshot }) => <>
                       <CameraIcon onClick={() => handleCaptureAvatar(getScreenshot)}
                         className={classes.capturePhoto} fontSize='large' style={{marginBottom:30}} />
                       <img className={classes.capturedPicture} width='300' height='174'
                         style={{visibility:file?'visible':'hidden'}} src={file} alt='chosen pic'></img>
                       </>}
                      </Webcam>
                    </div>}
        </div>            
    )
}

export default SendMessage