import React, { Component } from 'react'
import { TextInput, View } from 'react-native'
import Icon from 'src/components/Icon'
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'
import Text from 'src/components/Text';
export class CustomInput extends Component {

  render() {
    let props = this.props
    return (
      <View style={[styles.container, props.style]}>
        {/* {
          props.iconType === 'fontAwesome' ?
            props.iconName && <View style={styles.icon}>
              <FontAwesomeIcon name={props.iconName} size={16} color={props.iconColor || 'white'}/>
            </View>
           :
            props.iconName && <View style={styles.icon}>
              <Icon name={props.iconName} size={16} color={props.iconColor || 'white'}> </Icon>
            </View>
        } */}

        { props.iconName ?
            props.iconType ? 
              <View style={styles.icon}>
                <FontAwesomeIcon name={props.iconName} size={18} color={props.iconColor || 'white'}> </FontAwesomeIcon>
              </View>
            :
              <View style={styles.icon}>
                <Icon name={props.iconName} size={16} color={props.iconColor || 'white'}> </Icon>
              </View>
          : <View></View>
        }

        
        {props.labelName && <View style={styles.icon}>
          <Text style={{ color: props.labelColor || 'rgba(0, 0, 0, 0.5)' }}>{props.labelName}</Text>
        </View>
        }

        <View style={{ flex: 1 , justifyContent:'center'}}>
          <TextInput
            {...props}
            style={{ padding: 7, textAlign: 'right', color: props.afterInput || 'white', fontFamily: 'Prompt-Regular', ...props.textInputStyles }}
            secureTextEntry={props.secureTextEntry}
            textAlign={props.inputTextAlign || 'right'}
            placeholder={props.placeholder} 
            value={props.value}
          />
        </View>
      </View>
    )
  }
}

const styles = {
  container: {
    flexGrow: 1,
    flexDirection: 'row',
    borderRadius: 5,
    height: 40,
    maxHeight: 48,
    minHeight: 40,
    paddingHorizontal: 5,
    backgroundColor: '#FFF'
  },
  icon: {
    justifyContent: 'center',
    // alignItems: '',
    // flex: 1,
    paddingLeft: 5,
    paddingRight: 5
  },
  input: {
    // width: 100,
    // alignItems: 'flex-start',
    color: 'rgba(0, 0, 0, 0.5)',
    overflow: 'hidden',
    fontSize: 14
  }
}
