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

export default function Index(props) {
     const cardColor = Color.cardBackgroundColor;
     const {
          style,
          onChangeText,
          onFocus,
          placeholder,
          value,
          success,
          secureTextEntry,
          keyboardType,
          textAlignVertical,
          label,
          onSubmitEditing,
          borderBottomColor,
          icon
     } = props;
     return (
          <TouchableOpacity
               activeOpacity={0.99}>
               <View style={{
                    borderBottomWidth: 1,
                    borderBottomColor: borderBottomColor,
               }}>
                    {!!label && <Text style={{ fontWeight: 'bold' }}>{label}</Text>}
                    <TextInput
                         keyboardType={keyboardType}
                         autoCapitalise="words"
                         autoCorrect={false}
                         style={{
                              height: 40,
                              color: "black",
                              fontFamily: 'Raleway',
                              flex: 1,
                              height: '100%',
                              color: Color.textColor,
                              paddingTop: 5,
                              paddingBottom: 5,
                         }}
                         underlineColorAndroid={"transparent"}
                         placeholderTextColor={success ? Color.grayColor : Color.primaryColor}
                         placeholder={placeholder}
                         secureTextEntry={secureTextEntry}
                         value={value}
                         onChangeText={text => onChangeText(text)}
                         onFocus={() => onFocus()}
                         textAlignVertical={textAlignVertical}
                         onSubmitEditing={onSubmitEditing} />
                    {icon}
               </View>
          </TouchableOpacity>
     );
}

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

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