text: import PropTypes from 'prop-types';
  import React from 'react';
  import {
    View,
    StyleSheet,
    TouchableHighlight,
    TouchableOpacity,
    Platform,
    Switch,
    TextInput,
  } from 'react-native';
  import Avatar from '../avatar/Avatar';
  import Badge from '../badge/badge';
  import Icon from '../icons/Icon';
  import Text from '../text/Text';
  import colors from '../config/colors';
  import fonts from '../config/fonts';
  import normalize from '../helpers/normalizeText';
  import ViewPropTypes from '../config/ViewPropTypes';
  
  const ListItem = props => {
    const {
      onPress,
      title,
      leftIcon,
      rightIcon,
      leftIconOnPress,
      leftIconOnLongPress,
      leftIconUnderlayColor,
      leftIconContainerStyle,
      avatarStyle,
      avatarContainerStyle,
      avatarOverlayContainerStyle,
      underlayColor,
      subtitle,
      subtitleStyle,
      containerStyle,
      wrapperStyle,
      titleNumberOfLines,
      titleStyle,
      titleContainerStyle,
      hideChevron,
      chevronColor,
      roundAvatar,
      component,
      fontFamily,
      rightTitle,
      rightTitleContainerStyle,
      rightTitleStyle,
      rightTitleNumberOfLines,
      subtitleContainerStyle,
      subtitleNumberOfLines,
      badge,
      label,
      onLongPress,
      switchButton,
      onSwitch,
      switchDisabled,
      switchOnTintColor,
      switchThumbTintColor,
      switchTintColor,
      switched,
      textInput,
      textInputAutoCapitalize,
      textInputAutoCorrect,
      textInputAutoFocus,
      textInputEditable,
      keyboardType,
      textInputMaxLength,
      textInputMultiline,
      textInputOnChangeText,
      textInputOnFocus,
      textInputOnBlur,
      textInputSelectTextOnFocus,
      textInputReturnKeyType,
      textInputValue,
      textInputSecure,
      textInputStyle,
      textInputContainerStyle,
      textInputPlaceholder,
      onPressRightIcon,
      disabled,
      disabledStyle,
      ...attributes
    } = props;
  
    let { avatar } = props;
  
    let Component = onPress || onLongPress ? TouchableHighlight : View;
    let LeftIconWrapper =
      leftIconOnPress || leftIconOnLongPress ? TouchableHighlight : View;
    if (component) {
      Component = component;
    }
    if (typeof avatar === 'string') {
      avatar = { uri: avatar };
    }
    return (
      <Component
        {...attributes}
        onLongPress={onLongPress}
        onPress={onPress}
        disabled={disabled}
        underlayColor={underlayColor}
        style={[
          styles.container,
          containerStyle && containerStyle,
          disabled && styles.disabled,
          disabled && disabledStyle && disabledStyle,
        ]}
      >
        <View style={[styles.wrapper, wrapperStyle && wrapperStyle]}>
          {React.isValidElement(leftIcon)
            ? leftIcon
            : leftIcon &&
              leftIcon.name &&
              <LeftIconWrapper
                onLongPress={leftIconOnLongPress}
                onPress={leftIconOnPress}
                disabled={disabled}
                underlayColor={leftIconUnderlayColor}
                style={[
                  styles.iconStyle,
                  leftIconContainerStyle && leftIconContainerStyle,
                ]}
              >
                <View>
                  <Icon
                    type={leftIcon.type}
                    iconStyle={[styles.icon, leftIcon.style && leftIcon.style]}
                    name={leftIcon.name}
                    color={leftIcon.color || colors.grey4}
                    size={leftIcon.size || 24}
                  />
                </View>
              </LeftIconWrapper>}
          {avatar && React.isValidElement(avatar)
            ? avatar
            : avatar &&
              !React.isValidElement(avatar) &&
              <Avatar
                avatarStyle={avatarStyle && avatarStyle}
                containerStyle={avatarContainerStyle && avatarContainerStyle}
                overlayContainerStyle={
                  avatarOverlayContainerStyle && avatarOverlayContainerStyle
                }
                rounded={roundAvatar}
                source={avatar}
              />}
          <View style={styles.titleSubtitleContainer}>
            <View style={titleContainerStyle}>
              {title !== null &&
              (typeof title === 'string' || typeof title === 'number')
                ? <Text
                    numberOfLines={titleNumberOfLines}
                    style={[
                      styles.title,
                      !leftIcon && { marginLeft: 10 },
                      titleStyle && titleStyle,
                      fontFamily && { fontFamily },
                    ]}
                  >
                    {title}
                  </Text>
                : <View>
                    {title}
                  </View>}
            </View>
            <View style={subtitleContainerStyle}>
              {subtitle !== null &&
              (typeof subtitle === 'string' || typeof subtitle === 'number')
                ? <Text
                    numberOfLines={subtitleNumberOfLines}
                    style={[
                      styles.subtitle,
                      !leftIcon && { marginLeft: 10 },
                      subtitleStyle && subtitleStyle,
                      fontFamily && { fontFamily },
                    ]}
                  >
                    {subtitle}
                  </Text>
                : <View>
                    {subtitle}
                  </View>}
            </View>
          </View>
          {rightTitle &&
            rightTitle !== '' &&
            !textInput &&
            <View style={[styles.rightTitleContainer, rightTitleContainerStyle]}>
              <Text
                numberOfLines={rightTitleNumberOfLines}
                style={[styles.rightTitleStyle, rightTitleStyle]}
              >
                {rightTitle}
              </Text>
            </View>}
          {textInput &&
            <View
              style={[
                styles.rightTitleContainer,
                styles.textInputContainerStyle,
                textInputContainerStyle,
              ]}
            >
              <TextInput
                style={[styles.textInputStyle, textInputStyle]}
                underlineColorAndroid={'transparent'}
                defaultValue={rightTitle}
                value={textInputValue}
                placeholder={textInputPlaceholder}
                autoCapitalize={textInputAutoCapitalize}
                autoCorrect={textInputAutoCorrect}
                autoFocus={textInputAutoFocus}
                editable={disabled ? false : textInputEditable}
                keyboardType={keyboardType}
                maxLength={textInputMaxLength}
                multiline={textInputMultiline}
                onChangeText={textInputOnChangeText}
                onFocus={textInputOnFocus}
                onBlur={textInputOnBlur}
                secureTextEntry={textInputSecure}
                selectTextOnFocus={textInputSelectTextOnFocus}
                returnKeyType={textInputReturnKeyType}
              />
            </View>}
          {badge && !rightTitle && <Badge {...badge} />}
          {!hideChevron &&
            (React.isValidElement(rightIcon)
              ? rightIcon
              : <TouchableOpacity
                  onPress={onPressRightIcon}
                  disabled={disabled ? disabled : !onPressRightIcon}
                  style={styles.chevronContainer}
                >
                  <Icon
                    type={rightIcon.type}
                    iconStyle={rightIcon.style}
                    size={28}
                    name={rightIcon.name || 'chevron-right'}
                    color={rightIcon.color || chevronColor}
                  />
                </TouchableOpacity>)}
          {switchButton &&
            hideChevron &&
            <View style={styles.switchContainer}>
              <Switch
                onValueChange={onSwitch}
                disabled={disabled ? disabled : switchDisabled}
                onTintColor={switchOnTintColor}
                thumbTintColor={switchThumbTintColor}
                tintColor={switchTintColor}
                value={switched}
              />
            </View>}
          {label && label}
        </View>
      </Component>
    );
  };
  
  ListItem.defaultProps = {
    underlayColor: 'white',
    leftIconUnderlayColor: 'white',
    chevronColor: colors.grey4,
    rightIcon: { name: 'chevron-right' },
    hideChevron: false,
    roundAvatar: false,
    switchButton: false,
    textInputEditable: true,
    titleNumberOfLines: 1,
    subtitleNumberOfLines: 1,
    rightTitleNumberOfLines: 1,
    disabled: false,
  };
  
  ListItem.propTypes = {
    title: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number,
      PropTypes.object,
    ]),
    avatar: PropTypes.any,
    icon: PropTypes.any,
    onPress: PropTypes.func,
    rightIcon: PropTypes.oneOfType([PropTypes.element, PropTypes.object]),
    underlayColor: PropTypes.string,
    subtitle: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number,
      PropTypes.object,
    ]),
    subtitleStyle: PropTypes.any,
    subtitleNumberOfLines: PropTypes.number,
    containerStyle: PropTypes.any,
    wrapperStyle: PropTypes.any,
    titleStyle: PropTypes.any,
    titleContainerStyle: PropTypes.any,
    titleNumberOfLines: PropTypes.number,
    hideChevron: PropTypes.bool,
    chevronColor: PropTypes.string,
    roundAvatar: PropTypes.bool,
    badge: PropTypes.any,
    switchButton: PropTypes.bool,
    onSwitch: PropTypes.func,
    switchDisabled: PropTypes.bool,
    switchOnTintColor: PropTypes.string,
    switchThumbTintColor: PropTypes.string,
    switchTintColor: PropTypes.string,
    switched: PropTypes.bool,
    textInput: PropTypes.bool,
    textInputAutoCapitalize: PropTypes.oneOf([
      'none',
      'sentences',
      'words',
      'characters',
    ]),
    textInputAutoCorrect: PropTypes.bool,
    textInputAutoFocus: PropTypes.bool,
    textInputEditable: PropTypes.bool,
    keyboardType: PropTypes.oneOf([
      'default',
      'email-address',
      'numeric',
      'phone-pad',
      'ascii-capable',
      'numbers-and-punctuation',
      'url',
      'number-pad',
      'name-phone-pad',
      'decimal-pad',
      'twitter',
      'web-search',
    ]),
    textInputMaxLength: PropTypes.number,
    textInputMultiline: PropTypes.bool,
    textInputOnChangeText: PropTypes.func,
    textInputOnFocus: PropTypes.func,
    textInputOnBlur: PropTypes.func,
    textInputSelectTextOnFocus: PropTypes.bool,
    textInputReturnKeyType: PropTypes.string,
    textInputValue: PropTypes.string,
    textInputSecure: PropTypes.bool,
    textInputStyle: PropTypes.any,
    textInputContainerStyle: PropTypes.any,
    textInputPlaceholder: PropTypes.string,
    component: PropTypes.any,
    fontFamily: PropTypes.string,
    rightTitle: PropTypes.string,
    rightTitleContainerStyle: ViewPropTypes.style,
    rightTitleStyle: Text.propTypes.style,
    rightTitleNumberOfLines: PropTypes.number,
    subtitleContainerStyle: ViewPropTypes.style,
    label: PropTypes.any,
    onLongPress: PropTypes.func,
    leftIcon: PropTypes.oneOfType([PropTypes.element, PropTypes.object]),
    leftIconOnPress: PropTypes.func,
    leftIconOnLongPress: PropTypes.func,
    leftIconUnderlayColor: PropTypes.string,
    leftIconContainerStyle: ViewPropTypes.style,
    avatarStyle: ViewPropTypes.style,
    avatarContainerStyle: ViewPropTypes.style,
    avatarOverlayContainerStyle: ViewPropTypes.style,
    onPressRightIcon: PropTypes.func,
    disabled: PropTypes.bool,
    disabledStyle: ViewPropTypes.style,
  };
  
  const styles = StyleSheet.create({
    container: {
      paddingTop: 10,
      paddingRight: 10,
      paddingBottom: 10,
      borderBottomColor: colors.greyOutline,
      borderBottomWidth: 1,
      backgroundColor: 'transparent',
    },
    wrapper: {
      flexDirection: 'row',
      marginLeft: 10,
    },
    iconStyle: {
      justifyContent: 'center',
      alignItems: 'center',
    },
    icon: {
      marginRight: 8,
    },
    title: {
      fontSize: normalize(14),
      color: colors.grey1,
    },
    subtitle: {
      color: colors.grey3,
      fontSize: normalize(12),
      marginTop: 1,
      ...Platform.select({
        ios: {
          fontWeight: '600',
        },
        android: {
          ...fonts.android.bold,
        },
      }),
    },
    titleSubtitleContainer: {
      justifyContent: 'center',
      flex: 1,
    },
    chevronContainer: {
      alignItems: 'flex-end',
      justifyContent: 'center',
    },
    switchContainer: {
      alignItems: 'flex-end',
      justifyContent: 'center',
      marginRight: 5,
    },
    rightTitleContainer: {
      flex: 1,
      alignItems: 'flex-end',
      justifyContent: 'center',
    },
    rightTitleStyle: {
      marginRight: 5,
      color: colors.grey4,
    },
    textInputContainerStyle: {
      alignItems: null,
    },
    textInputStyle: {
      height: 20,
      flex: 1,
      textAlign: 'right',
    },
    disabled: {
      opacity: 0.5,
    },
  });
  
  export default ListItem;
  