import Icon from 'react-native-vector-icons/MaterialIcons';
import React, { FunctionComponent } from 'react';
import { StyleSheet, TextStyle, ViewStyle } from 'react-native';
import { IButtonProps, IStyledProps } from '../../../../common/types';
import { IPbxCall } from '../../../../../store/pbx/types';
import { TouchableOpacity } from 'react-native';

interface IProps extends IStyledProps<{ container?: ViewStyle }>, IButtonProps {
    callIconName?: string;
    callIconType?: any;
    call: IPbxCall
}
export const VoiceMailButtonView: FunctionComponent<IProps> = ({
    onPress,
    callIconName,
    style,
    call
}) => {
    style = { ...defaultStyle, ...style };
    const iconStyle = { ...defaultStyle.container, ...style.container }

    const voiceMailBtnStyle = call.isVoiceMailAllowed && call.hasPbxAccess
        ? { ...iconStyle, ...{ opacity: 0.3 } }
        : iconStyle;
    callIconName = callIconName || 'voicemail';
    return (
        <TouchableOpacity onPress={onPress} style={voiceMailBtnStyle}>

        <Icon
            name={callIconName}
            color='white'
            size={50}
            onPress={onPress}
        />
        </TouchableOpacity>
    );
};

const defaultStyle = StyleSheet.create({
    container: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: 60,
        height: 60,
        borderRadius: 30,
        borderColor: 'white',
        opacity:1
    }
});