import React from 'react';
import { TextInput, View } from 'react-native';
import PropTypes from 'prop-types';
import { Color } from '../../config/Color';


export default function Index(props) {
     const cardColor = Color.cardBackgroundColor;
     const {
          style,
          onChangeText,
          onFocus,
          placeholder,
          value,
          success,
          secureTextEntry,
          keyboardType,
          multiline,
          textAlignVertical,
          icon,
          onSubmitEditing,
     } = props;
     return (
          <View style={[{
               textInput: {
                    height: 46,
                    borderRadius: 5,
                    paddingHorizontal: 10,
                    width: '100%',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    flexDirection: 'row',
               }, backgroundColor: cardColor
          }, style]}>
               <TextInput
                    style={{
                         fontFamily: 'Raleway',
                         flex: 1,
                         height: '100%',
                         color: colors.text,
                         paddingTop: 5,
                         paddingBottom: 5,
                    }}
                    onChangeText={text => onChangeText(text)}
                    onFocus={() => onFocus()}
                    autoCorrect={false}
                    placeholder={placeholder}
                    placeholderTextColor={success ? Color.grayColor : Color.primaryColor}
                    secureTextEntry={secureTextEntry}
                    value={value}
                    selectionColor={Color.primaryColor}
                    keyboardType={keyboardType}
                    multiline={multiline}
                    textAlignVertical={textAlignVertical}
                    onSubmitEditing={onSubmitEditing}
               />
               {icon}
          </View>
     );
}

Index.propTypes = {
     style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
     onChangeText: PropTypes.func,
     onFocus: PropTypes.func,
     placeholder: PropTypes.string,
     value: PropTypes.string,
     success: PropTypes.bool,
     secureTextEntry: PropTypes.bool,
     keyboardType: PropTypes.string,
     multiline: PropTypes.bool,
     textAlignVertical: PropTypes.string,
     icon: PropTypes.node,
     onSubmitEditing: PropTypes.func,
};

Index.defaultProps = {
     style: {},
     onChangeText: text => { },
     onFocus: () => { },
     placeholder: 'Placeholder',
     value: '',
     success: true,
     secureTextEntry: false,
     keyboardType: 'default',
     multiline: false,
     textAlignVertical: 'center',
     icon: null,
     onSubmitEditing: () => { },
};