import React, { FunctionComponent } from 'react';
import { IStyledProps } from '../../../../common/types';
import { TextStyle } from 'react-native';
import { makeConferenceCall } from '../../../../../store/pbx/pbxSlice';
import { MergeCallButtonView } from './MegeCallButtonView';
import { CallState } from '../../../../../store/webrtc/types';
import { Logger } from '../../../../../utils/Log';
import { IPbxCall } from '../../../../../store/pbx/types';
import { useAppDispatch, useAppSelector } from '../../../../../store/hooks';
interface IProps extends IStyledProps<{ icon?: TextStyle }> {
    call: IPbxCall
    iconCallName?: string
}
const logger = new Logger('MergeCallButtonContainer');

export const MergeCallButton: FunctionComponent<IProps> = ({ call, iconCallName, style }) => {
    const dispatch = useAppDispatch();
    const secondCall = useAppSelector((state)=> state.pbx.secondCall);

    const executeConferenceCall = () => {
        if (call.callState === CallState.HELD) {
            logger.info('executeConferenceCall: first call is held , second call is active');
            dispatch(makeConferenceCall( {activeCallId:  secondCall!.callReferenceId , heldCallId: call.callId}));
        } else {
            logger.info(
                'executeConferenceCall: second call is held ,first call is active'
            );
           dispatch( makeConferenceCall( {activeCallId:  call.callId  , heldCallId: secondCall!.callReferenceId}));
        }
    };
    return <MergeCallButtonView onPress={executeConferenceCall} callIconName={iconCallName} style={style} call={call} />;
};