FINAL-PROJECT-FRONT/src/components/HomePage/CentralBar/HeaderBar/Buttons/CallModal/index.tsx

import { makeStyles, Typography } from '@material-ui/core'
import { useState } from 'react';
import { useSelector } from 'react-redux';
import ListItemText from '@mui/material/ListItemText';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import Avatar from '@mui/material/Avatar';
import MinimizeIcon from '@mui/icons-material/Minimize';
import CropLandscapeIcon from '@mui/icons-material/CropLandscape';
import CloseIcon from '@mui/icons-material/Close';
import ScreenShareIcon from '@mui/icons-material/ScreenShare';
import StopScreenShareIcon from '@mui/icons-material/StopScreenShare';
import VideocamIcon from '@mui/icons-material/Videocam';
import VideocamOffIcon from '@mui/icons-material/VideocamOff';
import MicIcon from '@mui/icons-material/Mic';
import MicOffIcon from '@mui/icons-material/MicOff';
import CallEndIcon from '@mui/icons-material/CallEnd';
import Moveable from "react-moveable";
import {OnDrag,OnResize,OnScale} from "react-moveable";

import { getChat } from '../../../../../../redux/chat/selector';
import { prodAwsS3,firstLetter,slicedWord } from '../../../../../../helpers'

const useStyles = makeStyles({
  overlay: {
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100vw',
    height: '100vh',
    zIndex: 100,
    overflowY: 'hidden',
  },
  shareScreenActive: {
    width: '90%',
    borderRadius: 7,
    margin: 'auto',
    border:'solid 2px #0084ff',
  },
  shareScreenDisabled: {
    width: 0,
    height:0,
  },  
  modalCall: {
    background: 'rgb(36, 36, 36)',
    position: 'absolute',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'start',
    alignItems: 'center',
    justifyItems:"center",
    width: '34vw',
    height:'50vh',
    left: '33vw',
    bottom: '25vh',
    borderRadius: 7,
  },
  rightIcons: {
    display: 'flex',
    justifyContent: 'end',
    alignContent: 'center',
    alignItems: 'center',
    width:'100%'
  },
  rightIconWrapper: {
    color: '#ffffff',
    cursor: 'pointer',
    padding:'3px 10px 3px 10px',
    '&:hover': {
      backgroundColor:'rgb(80, 80, 80)'
    }
  },
  rightIconWrapperClose: {
    color: '#ffffff',
    cursor: 'pointer',
    padding:'3px 10px 3px 10px',
    borderTopRightRadius:7,
    '&:hover': {
      backgroundColor:'#f02a2a'
    }
  },
  statusCall: {
    color: "#dfdfdf",
    animation: 'ripple 4s infinite ease-in-out',
  },
  animatedDots: {
    fontWeight: 'bold',
    display:'inline-block',
    fontFamily: 'monospace',
    clipPath: 'inset(0 3ch 0 0)',
    animation: `$run 2s steps(5) infinite`,   
  },
  bottomWrapper: {
    display: 'flex',
    justifyContent: 'center',
    padding: 5
  },
  bottomItem: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignContent: 'center',
    alignItems: 'center',
    cursor:'pointer', 
    width: 80,
  },
  bottomIcon: {
    cursor:'pointer',
  },
  titleIconBottom: {
    color: '#ffffff',
    fontSize: 13,
    paddingTop:7
  },
  '@keyframes run': {
    to: {
       clipPath: 'inset(0 -1ch 0 0)'
    },
  },  
})

interface ICallModal {
  setModalCall:any,
  shareRef: any,
  videoRef: any,
}

const CallModal = ({setModalCall,shareRef,videoRef}:ICallModal) => {
  const classes = useStyles()
  const { name, lastName, avatarUrl, color } = useSelector(getChat)
  const [mute, setMute] = useState<boolean>(false)
  const [share, setShare] = useState<any>(null)
  const target = videoRef.current
  const handleShareScreen = async () => {
    const displayMediaStreamConstraints = {
      video: true 
    };
    const navigator:any = window.navigator
    const stream = await navigator.mediaDevices.getDisplayMedia(displayMediaStreamConstraints);
    shareRef.current.srcObject = stream;
    setShare(true)
    stream.getVideoTracks()[0].onended = () => setShare(false)
  };
  const handleMute = () => setMute(prevState => !prevState)
  const handleCloseCallModal = () => setModalCall(false)
  // requesting, waiting ,ringing, hanging up,line busy

  return (
    <div className={classes.overlay} >
      <video ref={videoRef} style={{minWidth:100,minHeight:70}} playsInline muted autoPlay/>
      <Moveable
        target={target}
        container={null}
        origin={true}
        edge={false}
        draggable={true}
        throttleDrag={0}
        onDrag={({ target, transform }: OnDrag) =>
          target!.style.transform = transform }
        keepRatio={true}
        resizable={true}
        throttleResize={0}
        onResize={({target, width, height,delta}: OnResize) => {
          delta[0] && (target!.style.width = `${width}px`);
          delta[1] && (target!.style.height = `${height}px`);
        }}
        scalable={true}
        throttleScale={0}
        onScale={({target, scale, transform}: OnScale) => {
          target!.style.transform = transform;
        }}
        rotatable={false}
        pinchable={true}
      />
      <div className={classes.modalCall}>
        <div className={classes.rightIcons} style={{marginBottom: share?0:40,}}>
          <div className={classes.rightIconWrapper}>
            <MinimizeIcon fontSize='small' />
          </div>
          <div className={classes.rightIconWrapper}>
            <CropLandscapeIcon fontSize='small' />
          </div>
          <div className={classes.rightIconWrapperClose} onClick={handleCloseCallModal}>
            <CloseIcon fontSize='small' />
          </div>
        </div>
        {!share&&<ListItemAvatar style={{marginBottom:15}}>
          <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
            sx={{ background: color, width: 120, height: 120, marginRight: 2, fontSize:30}}>
             {`${firstLetter(name)}${firstLetter(lastName)}`}
          </Avatar>
        </ListItemAvatar>}
        {!share&&<div style={{marginBottom:'auto'}}>
          <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)}
          ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
          primaryTypographyProps={{ color: '#ffffff', fontSize: 20, fontWeight: 500 }} />
          <ListItemText secondary={<span className={classes.statusCall}>
            ringing<span className={classes.animatedDots}>
              ...</span>
          </span>} secondaryTypographyProps={{ textAlign: "center" }} />
        </div>}
        <video className={share?classes.shareScreenActive:classes.shareScreenDisabled} ref={shareRef} playsInline muted autoPlay/>
        <div className={classes.bottomWrapper}>
          {!share&&<div className={classes.bottomItem}>
            <Avatar className={classes.bottomIcon} onClick={handleShareScreen}
              sx={{backgroundColor: '#ffffff',color: 'rgb(36, 36, 36)', width: 44, height: 44}}>
             <ScreenShareIcon fontSize="medium" />
            </Avatar>
            <Typography variant="h6" className={classes.titleIconBottom}>Screencast</Typography>
          </div>}
          <div className={classes.bottomItem}>
            <Avatar className={classes.bottomIcon}
              sx={{backgroundColor: share?'rgb(88, 88, 88)':'#ffffff',color: share?'#ffffff':'rgb(36, 36, 36)', width: 44, height: 44}}>
              <VideocamOffIcon fontSize="medium" />
            </Avatar>
            <Typography variant="h6" className={classes.titleIconBottom}>Start Video</Typography>
          </div>
          <div className={classes.bottomItem}>
            <Avatar className={classes.bottomIcon}
              sx={{backgroundColor: '#f02a2a',color: '#ffffff', width: 44, height: 44}}>
              <CallEndIcon fontSize="medium" />
            </Avatar>
            <Typography variant="h6" className={classes.titleIconBottom}>End Call</Typography>
          </div>
          <div className={classes.bottomItem}>
            <Avatar className={classes.bottomIcon} onClick={handleMute}
              sx={{backgroundColor: mute?'#ffffff':'rgb(88, 88, 88)',color: mute?'rgb(36, 36, 36)':'#ffffff', width: 44, height: 44}}>
              {mute?<MicOffIcon fontSize="medium" />:<MicIcon fontSize="medium" />}
            </Avatar>
            <Typography variant="h6" className={classes.titleIconBottom}>{mute?'Unmute':'Mute'}</Typography>
          </div>
        </div>
      </div>
    </div>      
   )
}

export default CallModal