import React, { FunctionComponent } from 'react';
import { CallState, IP2PCall } from '../../../../../store/webrtc/types';
import { hangupCall, rejectCall } from '../../../../../store/webrtc/webrtcSlice';
import { ImageSourcePropType } from 'react-native';
import { IImageButtonStyleProps, IStyledProps } from '../../../../common/types';
import { EndCallButtonView } from './EndCallButtonView';
import { ImageButton } from '../../../../common/ImageButton';
import { useAppDispatch } from '../../../../../store/hooks';
export interface IEndCallBtnProps extends IStyledProps<IImageButtonStyleProps> {
    call: IP2PCall
    imageSource?: ImageSourcePropType;
    renderOnPress?: (call: IP2PCall) => void;
}

export const EndP2PCallButton: FunctionComponent<IEndCallBtnProps> = ({
    call,
    imageSource,
    renderOnPress,
    style
}) => {
    const dispatch = useAppDispatch();
    const handleEndCall = () => {
        if (renderOnPress) {
            renderOnPress(call);
        } else {
            const callState = call && (call.callState === CallState.ACTIVE || call.callState === CallState.RINGING_OUTGOING);
            callState ?
                dispatch(hangupCall())
                :
                dispatch(rejectCall());
        }
    }

    if (imageSource) {
        return <ImageButton imageSource={imageSource} style={style} onPress={handleEndCall} />
    }
    else {
        return <EndCallButtonView onPress={handleEndCall} style={style} />;
    }
};