/** @format */

import React, {useEffect, useState} from 'react';
import MainBlock, {ModalContainer} from './style';
import VerticalAlignTopIcon from '@mui/icons-material/VerticalAlignTop';
import CallEndIcon from '@mui/icons-material/CallEnd';
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 SendToMobileIcon from '@mui/icons-material/SendToMobile';
import DialpadIcon from '@mui/icons-material/Dialpad';
import CallCardDropDown from '../CallCardDropDown';
import ModalNumpad from '../ModalNumpad';
import {useConfigHoldMute} from "../../storage"

const Modal = ({children, hidden, hangupButton, phoneNumber, callType}) => {
    const boxDialer = window.BoxDialer;

    const configHoldMute = useConfigHoldMute((state) => state)
    const [rollUp, setRollUp] = useState(false);
    const [modalHidden, setModalHidden] = useState(false);
    const [transferModel, setTransferModel] = useState(true);
    const [numpadModal, setNumpadModal] = useState(false);


    useEffect(() => {
        setModalHidden(hidden);
    }, [hidden]);

    const selectUserFunc = (e) => {
        if (e) {
            boxDialer.transferButtonClick(e);
            setTransferModel(true);
        }
    };

    const openNumpad = () => {
        if (window.BX) {
        } else {
            setNumpadModal(!numpadModal);
        }
    };
    if (!modalHidden) return;

    const selectModalType = (type) => {
        console.log('selectModalType_inset_component: ', type)
        switch (type) {
            case 'incoming':
                return (<ModalContainer.Footer rollUp={rollUp}>
                    <button
                        className='redButton'
                        onClick={() => boxDialer.skipButtonClick()}>
                        <CallEndIcon/>
                        ЗАКРЫТЬ
                    </button>
                    <button
                        className='greenButton'
                        onClick={() => boxDialer.answerButtonClick()}>
                        ОТВЕТИТЬ
                    </button>
                </ModalContainer.Footer>);
            case 'outgoing':
                return (<ModalContainer.Footer rollUp={rollUp}>
                    <button
                        className='greenButton'
                        onClick={() => boxDialer.answerButtonClick()}>
                        ОТВЕТИТЬ
                    </button>
                </ModalContainer.Footer>);
            case 'connectingIncoming':
                return (<ModalContainer.Footer rollUp={rollUp}>
                    <button
                        className='redButton'
                        onClick={() => boxDialer.skipButtonClick()}>
                        <CallEndIcon/>
                        ЗАКРЫТЬ
                    </button>
                </ModalContainer.Footer>);
            case 'connectingOutgoing':
                return (<ModalContainer.Footer rollUp={rollUp}>
                    <button
                        className='redButton'
                        onClick={() => boxDialer.skipButtonClick()}>
                        <CallEndIcon/>
                        ЗАКРЫТЬ
                    </button>
                </ModalContainer.Footer>);
            case 'connected':
                return (<ModalContainer.Footer justify={'space-between'} rollUp={rollUp}>
                    <div className='outcomingEventStyle'>
                        <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
                            className='transferAreaIcon'
                            onClick={() => {
                                window.BX ? boxDialer.selectUser() : setTransferModel(!transferModel);
                            }}>
                            <SendToMobileIcon style={{color: '#fff'}}/>
                            <CallCardDropDown
                                hiddenState={transferModel}
                                selectUserFunc={selectUserFunc}
                            />
                        </div>
                        <div className={'openNumpadAreaIcon'}>
                            <DialpadIcon
                                style={{color: '#fff'}}
                                onClick={() => openNumpad()}
                            />
                            <ModalNumpad hidden={numpadModal}/>
                        </div>
                    </div>
                    <button
                        className='redButton'
                        onClick={() => boxDialer.skipButtonClick()}>
                        <CallEndIcon/>
                        ЗАКРЫТЬ
                    </button>
                </ModalContainer.Footer>);
            default:
                return (<ModalContainer.Footer rollUp={rollUp}>
                    Do not fount event
                </ModalContainer.Footer>);
        }
    };

    console.log('selectModalType_inset_component modalHidden value', modalHidden)

    return (<MainBlock
        hidden={true}
        rollUp={rollUp}
        onClick={(e) => e.stopPropagation()}>
        <ModalContainer onClick={(e) => e.stopPropagation()} rollUp={rollUp}>
            {children}
            <ModalContainer.Top className={'top'} rollUp={rollUp}>
                <p>
                    Звонок {callType === 'outcoming' ? 'на' : 'от'} {phoneNumber}
                </p>

                <p className='rollUpButton' onClick={() => setRollUp(true)}>
                    Свернуть
                </p>
            </ModalContainer.Top>
            <hr/>
            <ModalContainer.Head rollUp={rollUp}>
                <div className='round'></div>
                <p className='name'>No name</p>
            </ModalContainer.Head>
            {selectModalType(callType)}
        </ModalContainer>
        <div className='rollUpVesion'>
            <button
                className='close'
                onClick={() => {
                    hangupButton();
                    setRollUp(false);
                    setModalHidden(false);
                }}>
                ЗАКРЫТЬ
            </button>
            <button className='rollUpUn' onClick={() => setRollUp(false)}>
                <VerticalAlignTopIcon/>
            </button>
        </div>
    </MainBlock>);
};

export default Modal;
