/** @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;
