import { IPbxCall } from '../../../store/pbx/types';
import React, { FunctionComponent, useEffect, useState } from 'react';
import { SafeAreaView, StyleSheet, View } from 'react-native';
import { eventEmitter, EventType } from '../../../services/EventEmitter';
import {
    setSecondCallUpdates,
    setSessionsCountUpdates,
setPBXCall
} from '../../../store/pbx/pbxSlice';
import { Logger } from '../../../utils/Log';
import { PBXCallView } from './PBXCallView';
import { PBXCallActions } from './PBXCallActions'
import { AddNewCallButton, AnswerPbxCallButton, EndPbxCallButton, HoldCallButton, MergeCallButton, RetrieveCallButton, SwapButton, VoiceMailButton } from './PBXCallActionButtons';
import { TransferCallButton } from './PBXCallActionButtons/TransferCallButton/TransferCallButtonContainer';
import { useAppDispatch, useAppSelector } from '../../../store/hooks';

const logger = new Logger('PBXCallContainer');

export const PBXCall: FunctionComponent = () => {
    const [showDialPad, setShowDialPad] = useState<boolean>(false);
    const pbxCall = useAppSelector((state)=> state.pbx.pbxCall);
    const secondCall = useAppSelector((state)=> state.pbx.secondCall);
    const sessionsCount = useAppSelector((state)=> state.pbx.sessionsCount);


    const dispatch = useAppDispatch();
    useEffect(() => {
        const handlePBXSessionUpdate = (call: IPbxCall) => {
            logger.info(`handleSessionUpdatedEvent ${call.callId}`);
            dispatch(setPBXCall(call));
        }
        const handlePBXSessionRemovedAll = () => {
            logger.info(`handleSessionAllRemovedEvent`);
            dispatch(setPBXCall(undefined));
            dispatch(setSecondCallUpdates(undefined));
        }
        const handleSecondSessionUpdatedEvent = (call: IPbxCall) => {
            logger.info(`handleSecondSessionAddedEvent${call}`);
            dispatch(setSecondCallUpdates(call));
        }
        const handleSessionsCountUpdatedEvent = (count: number) => {
            dispatch(setSessionsCountUpdates(count));
        };
        const handleSessionRemovedEvent = () => {
            logger.info('handleSessionRemovedEvent');
            dispatch(setSecondCallUpdates(undefined));
        };
        // PBX first call event listener
        const sessionAddedListener = eventEmitter.addListener(EventType.SessionAdded, handlePBXSessionUpdate);
        const sessionUpdatedListener = eventEmitter.addListener(EventType.SessionUpdated, handlePBXSessionUpdate);
        const sessionAllRemovedListener = eventEmitter.addListener(EventType.SessionAllRemoved, handlePBXSessionRemovedAll);
        // PBX second call event listener
        const secondSessionUpdatedListener = eventEmitter.addListener(EventType.SecondSessionAdded, handleSecondSessionUpdatedEvent);
        const secondSessionAddedListener = eventEmitter.addListener(EventType.SecondSessionUpdated, handleSecondSessionUpdatedEvent);
        const sessionCountUpdatedListener = eventEmitter.addListener(EventType.SessionsCountUpdated, handleSessionsCountUpdatedEvent);
        const sessionRemovedListener = eventEmitter.addListener(EventType.SessionRemoved, handleSessionRemovedEvent);
        const secondSessionRemovedListener = eventEmitter.addListener(EventType.SecondSessionRemoved, handleSessionRemovedEvent);

        return () => {
            sessionAddedListener.remove();
            sessionUpdatedListener.remove();
            sessionAllRemovedListener.remove();
            secondSessionUpdatedListener.remove();
            secondSessionAddedListener.remove();
            sessionCountUpdatedListener.remove();
            sessionRemovedListener.remove();
            secondSessionRemovedListener.remove();
        }
    }, []);

    const openDialPad = () => {
        setShowDialPad(!showDialPad);
    };
    // const dialPadButton = (
    //     <Icon
    //         name="keypad"
    //         color="#ffffff"
    //         size={35}
    //         type="ionicon"
    //         onPress={openDialPad}
    //     />
    // );
    if (pbxCall) {
    const endCallButton = <EndPbxCallButton call={pbxCall} iconCallName="call-end" />
    const answerAudioCallButton = <AnswerPbxCallButton call={pbxCall} />
    const holdCallButton = <HoldCallButton call={pbxCall} />
    const retrieveCallButton = <RetrieveCallButton call={pbxCall} />
    const swapCallsButton = <SwapButton call={pbxCall} />
    const voiceMailButton = <VoiceMailButton call={pbxCall} />
    const addNewCallButton = <AddNewCallButton call={pbxCall} />
    const mergeCallsButton = <MergeCallButton call={pbxCall} />
    const transferCallButton = <TransferCallButton call={pbxCall} />
    const RejectPbxCallButton = <EndPbxCallButton call={pbxCall} iconCallName="call-end" />

    const pbxCallActions =  secondCall && <PBXCallActions
        call={secondCall}
        // dialPadButton={dialPadButton}
        endCallButton={endCallButton}
        answerAudioCallButton={answerAudioCallButton}
        holdButton={holdCallButton}
        retrieveCallButton={retrieveCallButton}
        voiceMailButton={voiceMailButton}
        sessionsCount={sessionsCount}
        swapCallsButton={swapCallsButton}
        addNewCallButton={addNewCallButton}
        mergeCallsButton={mergeCallsButton}
        transferCallButton={transferCallButton}
        RejectPbxCallButton={RejectPbxCallButton}
    />


        return (
            <View>
                <SafeAreaView style={defaultStyle.headerColor} />
                <PBXCallView pbxCall={pbxCall} callActionsComponent={pbxCallActions} showDialPad={showDialPad} toggleKeyPad={openDialPad} />
            </View>
        );
    } else return null;
}

const defaultStyle = StyleSheet.create({
    headerColor: {
        backgroundColor: '#0086CF',
    },
});