
import React, { FunctionComponent } from 'react';
import { AddVideoToConfButtonView } from './AddVideoToConfButtonView';
import { IConference } from '../../../../../store/conference/types';
import { addVideoToConference, removeVideoFromConference } from '../../../../../store/conference/conferenceSlice';
import { ImageSourcePropType } from 'react-native';
import { IImageButtonStyleProps, IStyledProps } from '../../../../common/types';
import { ImageButton } from '../../../../common/ImageButton';
import { useAppDispatch } from '../../../../../store/hooks';
interface IProps extends IStyledProps<IImageButtonStyleProps> {
    call: IConference;
    imageSource?: ImageSourcePropType;
    renderOnPress?: (call: IConference) => void;
}

export const AddVideoToConfButton: FunctionComponent<IProps> = ({
    call,
    imageSource,
    style,
    renderOnPress
}) => {
    const dispatch = useAppDispatch();
    const onVideoButtonPressed = () => {

        if (renderOnPress) {
            renderOnPress(call);
        } else {
            call.isLocalVideoEnabled ? dispatch(removeVideoFromConference()) : dispatch(addVideoToConference());
        }
    }

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