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

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

    const executeAlternate = () => {
        if (call.callState === CallState.HELD) {
            logger.info('onRetrieveCall: retrieve the held first call ');
            dispatch(alternateCalls({ activeCallId: secondCall!.callReferenceId, heldCallId: call!.callId}))
        } else {
            logger.info('onRetrieveCall: retrieve the second first call ');
            dispatch(alternateCalls({ activeCallId: call!.callId, heldCallId: secondCall!.callReferenceId}))
        }
    };

    return <SwapButtonView onPress={executeAlternate} callIconName={iconCallName} style={style} />;
};