import React, { Component } from 'react';
import { View, Text, TextInput, TouchableOpacity, Platform } from 'react-native';
import { colors } from '../assets/styles/colors-theme';
import { width, height } from '../services/screen';
import { inject, observer } from "mobx-react"
import { observable, makeObservable } from 'mobx'
const CustomTextInput = inject("appStore")(observer(class CustomTextInput extends React.Component {

  render() {
    return (
      <View
        style={{
          backgroundColor: 'white',
          height: 50,
          borderRadius: 15,
          width: width / 3,
          justifyContent: 'center',
          marginTop: 40,
          borderWidth: 1,
          borderColor: colors.buttonColor,
        }}>
        <TextInput
          underlineColorAndroid="rgba(0,0,0,0)"
          keyboardType={this.props.keyboardType}
          onChangeText={this.props.onChangeText}
          secureTextEntry={this.props.secureTextEntry}
          placeholderStyle={{ fontWeight: 'bold' }}
          placeholderTextColor={colors.inputTextColor}
          ref={input => this.props.inputRef && this.props.inputRef(input)}
          returnKeyType={this.props.returnKeyType}
          onSubmitEditing={
            this.props.onSubmitEditing && this.props.onSubmitEditing
          }
          onFocus={this.props.onFocus}
          placeholder={this.props.title}
          value={this.props.value}
          style={{
            color: colors.inputTextColor,
            fontSize: 17,

            marginBottom: Platform.OS === 'ios' ? 3 : 0,
            paddingVertical: 0,
            marginLeft: 15,
          }}
        />
      </View>
    );
  }
}))
export default CustomTextInput;
