import React, { FunctionComponent } from 'react';
import { ImageSourcePropType } from 'react-native';
import { IP2PCall } from '../../../../../store/webrtc/types';
import { webRTCService } from '../../../../../services/calls/webrtc';
import { AddVideoButtonView } from './AddVideoButtonView';
import { IImageButtonStyleProps, IStyledProps } from '../../../../common/types';
import { ImageButton } from '../../../../common/ImageButton';

export interface IVideoButtonProps extends IStyledProps<IImageButtonStyleProps> {
    imageSource?: ImageSourcePropType;
    call: IP2PCall;
    renderOnPress?: (call: IP2PCall) => void;
}

export const AddVideoButton: FunctionComponent<IVideoButtonProps> = ({ call, imageSource, renderOnPress, style }) => {

    const onVideoButtonPressed = () => {
        if (call.isLocalVideoEnabled) {
            webRTCService.removeLocalVideoFromCall();
        } else {
            webRTCService.addLocalVideoToCall();
        }
    }

    const handleOnPressed = () => {
        if (renderOnPress) {
            renderOnPress(call);
        }
        else {
            onVideoButtonPressed()
        }
    }


    if (imageSource) {
        return <ImageButton imageSource={imageSource} style={style} onPress={handleOnPressed} />
    }
    else {
        return <AddVideoButtonView onPress={handleOnPressed} call={call} style={style} />;
    };


};