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

interface IProps extends IStyledProps<{ container?: ViewStyle }>, IButtonProps {
    callIconName?: string;
    callIconType?: any;
    call: IPbxCall

}

export const MergeCallButtonView: FunctionComponent<IProps> = ({
    call,
    onPress,
    callIconName,
    callIconType,
    style
}) => {
    style = { ...defaultStyle, ...style };
    const iconStyle = { ...defaultStyle.container, ...style.container }
    const holdBtnStyle =
        call.callState === CallState.HELD || call.isHeldByDistant
            ? { ...iconStyle, ...{ opacity: 0.3 } }
            : iconStyle;
    callIconName = callIconName || 'groups';
    callIconType = callIconType || 'MaterialIcons';

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

const defaultStyle = StyleSheet.create({

    container: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: 60,
        height: 60,
        borderRadius: 30,
        borderColor: 'white',
        backgroundColor: 'red'
    }
});