import React, {Component} from 'react';
import {View, Text, TextInput, TouchableOpacity,Platform} from 'react-native';
import {scale, verticalScale, moderateScale} from 'react-native-size-matters';
import Icon from 'react-native-vector-icons/FontAwesome5';
import Size from '../common/size';
const size = new Size();
import {colors} from '../assets/styles/colors-theme';
import {Fonts} from '../assets/styles/fonts-theme';
import {width, height} from '../common/screen';

class IconTextInput extends Component {
  inputOrButton() {
    if (this.props.type == 'input') {
      return (
        <View
          style={{
            flexDirection: 'row',
            borderBottomColor: colors.mainColor,
            flex: 0.9,
            marginRight: 10,
            borderBottomWidth: 1,
          }}>
          <TextInput
            editable={this.props.editable}
            underlineColorAndroid="rgba(0,0,0,0)"
            keyboardType={this.props.keyboardType}
            onChangeText={this.props.onChangeText}
            placeholderStyle={{fontFamily: Fonts.ubuntuL}}
            placeholderTextColor={colors.textColor}
            placeholder={this.props.title}
            value={this.props.content}
            style={{
              color: colors.textColor,
              fontSize: 15,
              fontFamily: Fonts.ubuntuL,
              marginBottom: Platform.OS === 'ios' ? 3 : 0,
              flex: 1,
              justifyContent: 'flex-end',
              alignItems: 'center',
              flexDirection: 'row',
              paddingVertical: 0 
            }}
          />
        </View>
      );
    } else {
      return (
        <TouchableOpacity
          onPress={() => this.props.onPress && this.props.onPress()}
          style={{
            flexDirection: 'row',
            borderBottomColor: colors.mainColor,
            flex: 0.9,
            marginRight: 10,
            borderBottomWidth: 1,
          }}>
          <View
            style={{
              marginBottom: 3,
              alignItems: 'flex-start',
              flex: this.props.leftFlex,
            }}>
            <Text
              style={{
                color: colors.textColor,
                fontSize: 15,
                fontFamily: Fonts.ubuntuL,
              }}>
              {this.props.title}
            </Text>
          </View>
          <View
            style={{
              marginBottom: 3,
              justifyContent: 'flex-end',
              alignItems: 'center',
              flexDirection: 'row',
              flex: this.props.rightFlex,
            }}>
            <Text
              style={{
                color: colors.textColor,
                fontSize: 15,
                fontFamily: Fonts.ubuntuL,
              }}>
              {this.props.content}
            </Text>
          </View>
        </TouchableOpacity>
      );
    }
  }

  iconRander() {
    if (this.props.iconStyle) {
      return (
        <Icon
          solid
          style={{flex: 0.1}}
          name={this.props.icon}
          size={25}
          color={colors.mainColor}
          //      onPress={() => this.props.onPress && this.props.onPress()}
        />
      );
    } else {
      return (
        <Icon
        solid
          style={{flex: 0.1}}
          name={this.props.icon}
          size={25}
          color={colors.mainColor}
          //   onPress={() => this.props.onPress && this.props.onPress()}
        />
      );
    }
  }
  render() {
    return (
      <View
        style={{
          //borderBottomColor: colors.textColor,
          // borderBottomWidth: 1,
          marginTop: 10,
          height: verticalScale(40),
          borderRadius: 5,
          flexDirection: 'row',
          width: width - 40,
          alignItems: 'space-between',
        }}>
        {this.inputOrButton()}

        {this.iconRander()}
      </View>
    );
  }
}
export default IconTextInput;
