import React, { FunctionComponent } from 'react';
import { StyleSheet, ViewStyle } from 'react-native';
import { IButtonProps, IStyledProps } from '../../../../common/types';
import { IConference } from '../../../../../store/conference/types';
import Icon from 'react-native-vector-icons/Ionicons';

interface IProps extends IStyledProps<{ image?: any, container?: ViewStyle }>, IButtonProps {
    call: IConference,
}
export const AddVideoToConfButtonView: FunctionComponent<IProps> = ({
    onPress,
    call,
    style
}) => {
    style = { ...defaultStyle, ...style };
    const iconStyle = { ...defaultStyle.image, ...style.image }
    const callIconName = (call.isLocalVideoEnabled ? 'videocam-outline' : 'videocam');
    return (
        <Icon
            name={callIconName}
            style={iconStyle}
            onPress={onPress}
        />
    );
};

const defaultStyle = StyleSheet.create({
    image: {
        color: 'white',
        fontSize: 40,
        opacity: 1,
    },
});