import React, { FunctionComponent } from 'react';
import { ImageSourcePropType } from 'react-native';
import { switchCamera } from '../../../../store/webrtc/webrtcSlice';
import { SwitchCameraButtonView } from './SwitchCameraButtonView';
import { IImageButtonStyleProps, IStyledProps } from '../../../common/types';
import { ImageButton } from '../../../common/ImageButton';
import { useAppDispatch } from '../../../../store/hooks';
interface IProps extends IStyledProps<IImageButtonStyleProps> {
    imageSource?: ImageSourcePropType;
    renderOnPress?: () => void;
}

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

    const onSwitchCamera = () => {
        if (renderOnPress) {
            renderOnPress();
        }
        else {
            dispatch(switchCamera());
        }
    }
    if (imageSource) {
        return <ImageButton imageSource={imageSource} style={style} onPress={onSwitchCamera} />
    }
    else {
        return <SwitchCameraButtonView onPress={onSwitchCamera} style={style} />;
    }
};