text: import PropTypes from 'prop-types';
  import React from 'react';
  import {
    View,
    StyleSheet,
    Platform,
    TouchableHighlight,
    ActivityIndicator,
    Text as NativeText,
  } from 'react-native';
  import Icon from 'react-native-vector-icons/FontAwesome';
  import Text from '../text/Text';
  import fonts from '../config/fonts';
  import ViewPropTypes from '../config/ViewPropTypes';
  
  const log = () => {
    console.log('please attach method to this component'); // eslint-disable-line no-console
  };
  
  const colors = {
    ['github-alt']: '#000000',
    ['google-plus-official']: '#dd4b39',
    ['reddit-alien']: '#fc461e',
    ['stack-overflow']: '#f27f33',
    angellist: '#1c4082',
    codepen: '#000000',
    envelope: '#000000',
    etsy: '#f2581e',
    facebook: '#3b5998',
    foursquare: '#0072b1',
    github: '#000000',
    gitlab: '#e14329',
    instagram: '#517fa4',
    linkedin: '#007bb6',
    medium: '#02b875',
    pinterest: '#cb2027',
    quora: '#a82400',
    soundcloud: '#f50',
    steam: '#c6c3c1',
    stumbleupon: '#EB4823',
    tumblr: '#32506d',
    twitch: '#6441A5',
    twitter: '#00aced',
    vimeo: '#aad450',
    wechat: '#7bb32e',
    wordpress: '#21759b',
    youtube: '#bb0000',
  };
  
  const SocialIcon = props => {
    const {
      activityIndicatorStyle,
      button,
      component,
      disabled,
      fontFamily,
      fontStyle,
      fontWeight,
      iconColor,
      iconSize,
      iconStyle,
      light,
      loading,
      onLongPress,
      onPress,
      raised,
      small,
      style,
      title,
      type,
      underlayColor,
      ...attributes
    } = props;
  
    const Component =
      onPress || onLongPress ? component || TouchableHighlight : View;
    let loadingElement;
    if (loading) {
      loadingElement = (
        <ActivityIndicator
          animating={true}
          style={[styles.activityIndicatorStyle, activityIndicatorStyle]}
          color={iconColor || 'white'}
          size={(small && 'small') || 'large'}
        />
      );
    }
    return (
      <Component
        {...attributes}
        underlayColor={light ? 'white' : underlayColor || colors[type]}
        onLongPress={disabled ? null : onLongPress || log}
        onPress={(!disabled || log) && (onPress || log)}
        disabled={disabled || false}
        style={[
          raised && styles.raised,
          styles.container,
          button && styles.button,
          !button && raised && styles.icon,
          !button &&
            !light &&
            !raised && {
              width: iconSize * 2 + 4,
              height: iconSize * 2 + 4,
              borderRadius: iconSize * 2,
            },
          { backgroundColor: colors[type] },
          light && { backgroundColor: 'white' },
          style && style,
        ]}
      >
        <View style={styles.wrapper}>
          <Icon
            style={[iconStyle && iconStyle]}
            color={light ? colors[type] : iconColor}
            name={type}
            size={iconSize}
          />
          {button &&
            title && (
              <Text
                style={[
                  styles.title,
                  light && { color: colors[type] },
                  fontFamily && { fontFamily },
                  fontWeight && { fontWeight },
                  fontStyle && fontStyle,
                ]}
              >
                {title}
              </Text>
            )}
          {loading && loadingElement}
        </View>
      </Component>
    );
  };
  
  SocialIcon.propTypes = {
    component: PropTypes.func,
    type: PropTypes.string,
    button: PropTypes.bool,
    onPress: PropTypes.func,
    onLongPress: PropTypes.func,
    iconStyle: ViewPropTypes.style,
    style: ViewPropTypes.style,
    iconColor: PropTypes.string,
    underlayColor: PropTypes.string,
    title: PropTypes.string,
    raised: PropTypes.bool,
    disabled: PropTypes.bool,
    loading: PropTypes.bool,
    activityIndicatorStyle: ViewPropTypes.style,
    small: PropTypes.string,
    iconSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    light: PropTypes.bool,
    fontWeight: PropTypes.string,
    fontStyle: NativeText.propTypes.style,
    fontFamily: PropTypes.string,
  };
  
  SocialIcon.defaultProps = {
    raised: true,
    iconColor: 'white',
    iconSize: 24,
    button: false,
  };
  
  const styles = StyleSheet.create({
    container: {
      margin: 7,
      borderRadius: 30,
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
    },
    button: {
      paddingTop: 14,
      paddingBottom: 14,
    },
    raised: {
      ...Platform.select({
        ios: {
          shadowColor: 'rgba(0,0,0, .4)',
          shadowOffset: { height: 1, width: 1 },
          shadowOpacity: 1,
          shadowRadius: 1,
        },
        android: {
          elevation: 2,
        },
      }),
    },
    wrapper: {
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
    },
    title: {
      color: 'white',
      marginLeft: 15,
      ...Platform.select({
        ios: {
          fontWeight: 'bold',
        },
        android: {
          ...fonts.android.black,
        },
      }),
    },
    icon: {
      height: 52,
      width: 52,
    },
    activityIndicatorStyle: {
      marginHorizontal: 10,
      height: 0,
    },
  });
  
  export default SocialIcon;
  