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 MenuItem from '@mui/material/MenuItem';
import ListItemText from '@mui/material/ListItemText';
import Picker from 'emoji-picker-react';

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

import FilesMenu from "../FilesMenu";
import {
    sentMessageById, sentImgMessageById, sentAudioMessageById,
    sentVideoMessageById,sentFileMessageById,sentMessageReplyById
} from '../../../../../api-data'
import { getChat } from '../../../../../redux/chat/selector'
import { getRightIsOpen } from '../../../../../redux/control/selector'
import { playNotification,prodBaseURL,firstLetter,slicedWord } 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',
  },
  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: 0,
    zIndex:2,
  },
  replyIconClose: {
    cursor: 'pointer',
    margin:'0px 7px',
    '&:hover': {
      color:'#f02a2a',
      transform: 'rotate(180deg)',
      transition: 'all 250ms ease-out ',
    }
  },
  replyListWrapper: {
    width: '100%',
  },
  replyColumn: {
    height: '80%',
    width: 2,
    backgroundColor: '#00aeff',
  },
  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',
    bottom:'9vh',
    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>>,
  handleScrollToTheMessage: (_id:string) => void
}

const SendMessage = ({isArrow,silentMode,isReply,setIsReply,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 [isRecording, setIsRecording] = useState<boolean>(false)
    const [isFilming, setIsFilming] = useState<boolean>(false)
    const [isOpenCamera, setIsOpenCamera] = useState<boolean>(false)
    const [type, setType] = useState<string>('')
    const { status, startRecording, stopRecording, mediaBlobUrl, clearBlobUrl } = useReactMediaRecorder({ audio: true,blobPropertyBag:{type: "audio/mp3"}});
    const { status: _status, 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) => {
        setValue(prevValue => prevValue + emojiObject.emoji)
        setIsOpenEmoji(false)
    };    
    const clearMessage = () => {
      file && setFile(false)
      isRecording && setIsRecording(false)
      isFilming && setIsFilming(false)
      value && setValue('')
      caption&& setCaption('')
      type && setType('')
      mediaBlobUrl && clearBlobUrl()
      _mediaBlobUrl && _clearBlobUrl()
      isOpenMenu && setIsOpenMenu(false)
      isOpenEmoji && setIsOpenEmoji(false)
      isOpenCaption && setIsOpenCaption(false)
   }

    const sentMessage = async () => {
        if (value && !isReply) sentMessageById(companionId, value, caption.trim())
        if (value && isReply) {
           sentMessageReplyById(isReply._id, value, caption.trim())
           isReply&&setIsReply(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 handleOpenCaption = () => !isOpenCaption && setIsOpenCaption(true)
    const handleCloseCaption = (e: any) => e.target.id === 'overlay' && isOpenCaption && setIsOpenCaption(false)
    const handleRecording = () => {
        if (isRecording) return stopRecording()
        startRecording()
        setType('recording')
        setIsRecording(true) 
    }
    const handleFilming = () => {
        if (isFilming) return _stopRecording()
        _startRecording()
        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()
  }
  
  useEffect(() => {
    if (isReply) {
      stopRecording()
      _stopRecording()
      clearBlobUrl()
      _clearBlobUrl()
      setIsRecording(false)
      setIsFilming(false)     
      setFile(false)
      setValue('')
      setCaption('')
      setType('')
      setIsOpenMenu(false)
      setIsOpenEmoji(false)
      setIsOpenCaption(false)
    }
  }, [isReply])
  console.log(file,'file', status ,'status', _status, '_status')
    return (
        <div className={value || file || status === 'stopped' || _status === 'stopped' ?classes.containerActive:classes.container}>
            {isArrow && <div className={classes.borderTop}></div>}
            {isReply && <div className={classes.replyTop}>
                <CloseIcon onClick={handleCloseReply} className={classes.replyIconClose} />
                <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: "#0379af",fontSize:16 }}
                      secondary={`Type : ${isReply.type.toUpperCase()}`}
                      secondaryTypographyProps={{ fontSize:16 }}/>          
                  </MenuItem>
                </ul>
            </div>}       
            {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 !== 'idle' || _status === 'stopped' || file || value || isFilming || isReply ? '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 === 'idle'&&!isRecording && !isReply ? 'block' : 'none'}}/>
                <SentimentSatisfiedAltIcon onClick={handleOpenEmoji} 
                    fontSize='medium' sx={{color: isOpenEmoji ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
                    pointerEvents: file || type === 'recording' || type === 'filming' ? '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 || type === 'recording' || type === 'filming'? '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'}}>
                      <Picker onEmojiClick={onEmojiClick} />
                   </div>  
                </div>
                <div onClick={handleCloseCaption} className={classes.overlay} id='overlay'
                  style={{ display: isOpenCaption ? 'block' : 'none' }}>
                   <TextField className={classes.captionTextField} onChange={handleTextareaCaption}
                    style={{ left: rightIsOpen ? '32.5vw' : '45vw', top: isReply?'78.5vh':'85vh' }}
                    placeholder='Caption' value={caption} id="caption" name='caption' variant='outlined'/>
                </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 === 'idle' && _status === 'idle' ? '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 !== 'idle'
                   || _status !== 'idle' || isReply ? '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 !== 'idle' || _status !== 'idle' || isReply ? '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