/** @format */ import React from 'react'; import Block from './style'; import { useTranslator } from '@eo-locale/react'; import { intervalToDuration } from 'date-fns'; import { useState } from 'react'; import { useEffect } from 'react'; import MicIcon from '@mui/icons-material/Mic'; import MicOffIcon from '@mui/icons-material/MicOff'; import PlayArrowIcon from '@mui/icons-material/PlayArrow'; import PauseIcon from '@mui/icons-material/Pause'; // import { contextModalEventProperty } from '../../context/modalEventProperty'; import { useContext } from 'react'; import {useConfigHoldMute} from "../../storage" const InnerCaller = ({ hidden, type, from, innerTimer }) => { const boxDialer = window.BoxDialer; const configHoldMute = useConfigHoldMute((state) => state) const translator = useTranslator(); // // context // const [callEvents, setCallEvents] = useContext(contextModalEventProperty); const dataFormatter = (secund) => { let ts = intervalToDuration({ start: 0, end: secund * 1000, }); return secund > 3599 ? `${ts.hours}:${ts.minutes}:${ts.seconds}` : `${ts.minutes}:${ts.seconds}`; }; const selectModalType = (type) => { switch (type) { case 'connected': return ( <> <div className='button timer'> <div>{dataFormatter(innerTimer)}</div> <div onClick={() => boxDialer.holdButtonClick()}> {configHoldMute?.state?.callHold ? ( <PlayArrowIcon style={{ color: '#fff' }} /> ) : ( <PauseIcon style={{ color: '#fff' }} /> )} </div> <div onClick={() => boxDialer.muteButtonClick()}> {configHoldMute?.state?.callMute ? ( <MicOffIcon style={{ color: '#fff' }} /> ) : ( <MicIcon style={{ color: '#fff' }} /> )} </div> </div> <button className='button red nocopy' onClick={() => boxDialer.hangupButtonClick()}> {translator.translate('REJECT')} </button> </> ); case 'connectingOutgoing': return ( <button className='button red nocopy' onClick={() => boxDialer.hangupButtonClick()}> {translator.translate('REJECT')} </button> ); case 'connectingIncoming': return ( <> <button className='button light_blue nocopy' onClick={() => boxDialer.answerButtonClick()}> {translator.translate('ANSWER')} </button> <button className='button red nocopy' onClick={() => boxDialer.hangupButtonClick()}> {translator.translate('REJECT')} </button> </> ); } }; if (typeof from !== 'undefined' && from.length > 6) return; return ( <Block hidden={hidden}> <div className='top'> <p className='call_text nocopy'> {(type == 'connectingIncoming' || type == 'connected') && ( <> {translator.translate('CALL_FROM')}{' '} <span className='phone_text'>{from}</span> </> )} {type == 'connectingOutgoing' && ( <> {translator.translate('CALL_TO')}{' '} <span className='phone_text'>{from}</span> </> )} </p> </div> <div className='bottom'>{selectModalType(type)}</div> </Block> ); }; export default InnerCaller;