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

import Stack from '@mui/material/Stack';
import IconButton from '@mui/material/IconButton';
import SearchIcon from '@mui/icons-material/Search';
import PhoneIcon from '@mui/icons-material/Phone';
import { makeStyles } from '@material-ui/core'
import { useDispatch,useSelector } from 'react-redux';
import { useState, useRef, useEffect } from 'react';

import MenuList from './MenuList'
import DeleteModal from './DeleteModal';
import CallModal from './CallModal';
import { getAuthorizationState } from '../../../../../redux/authorization/selector';
import { actionRightIsOpen } from '../../../../../redux/control/action'

const Peer = require('simple-peer')


const useStyles = makeStyles({
  container: {
    marginLeft: 20,
    display: 'flex',
    alignContent: 'center',
    alignItems:'center'
  }, 
})

interface IButtons {
  setIsSomeSelected: React.Dispatch<React.SetStateAction<boolean>>,
  socket:any
}

const Buttons = ({setIsSomeSelected,socket}:IButtons) => {
  const classes = useStyles()
  const dispatch = useDispatch()
  const { name, lastName } = useSelector(getAuthorizationState)
  const shareRef = useRef<any>(null)
  const videoRef = useRef<any>(null)
  const [modalDelete, setModalDelete] = useState<boolean>(false)
  const [modalCall, setModalCall] = useState<boolean>(false)
  const [mySocketId, setMySocketId] = useState<string>('')
  const handleOpenSearch = (e: any) => {
    e.stopPropagation()
    dispatch(actionRightIsOpen('search'))
  }
  const handleStartCall = async (e: any) => {
    e.stopPropagation()
    setModalCall(true)
    const stream = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    })
    const peer = new Peer({
      initiator: true,
      trickle: false, 
      stream 
    });
    peer.on("signal", (data:any) => {
      socket.emit("call", {
        userToCall: 'FUCeH4L8nAtPu7DlAAAN',
        signalData: data,
        from: socket.id,
        name: `${name} ${lastName}`,
       })
    });
    peer.on("stream", (companionStream:any) => {});
    socket.on("accepted", ({ signal }:any) => {
      peer.signal(signal);
    });
    // connectionRef.current = peer; 
  }

  const handleAnswerCall = async () => {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    })
    const peer = new Peer({
      initiator: false,
      trickle: false,
      stream,
    });
    peer.on("signal", (data:any) => {
      socket.emit("answer", { signal: data, to: 'caller' });
    });
    peer.on("stream", (companionStream:any) => {});
    peer.signal();
    // connectionRef.current = peer;
  };

//leaveCall function to destroy the peer-to-peer connection

const HandleLeaveCall = () => {
    // connectionRef.current.destroy();
  };  

  return (
    <Stack className={classes.container} direction="row">
      <IconButton onClick={handleOpenSearch} aria-label="delete" size="medium">
        <SearchIcon fontSize='medium'/>
      </IconButton>
      <IconButton onClick={handleStartCall} aria-label="delete" size="medium">
        <PhoneIcon fontSize='medium'/>
      </IconButton>      
      <MenuList setModalDelete={setModalDelete} setIsSomeSelected={setIsSomeSelected}/>
      {modalDelete && <DeleteModal setModalDelete={setModalDelete} />}
      {modalCall && <CallModal setModalCall={setModalCall} shareRef={shareRef} videoRef={videoRef}/>}
    </Stack>
  );
}

export default Buttons