import React, { Component } from 'react'
import { TextInput, View, TouchableOpacity } from 'react-native';
import { colors } from '../assets/styles/colors-theme';
import { width, height } from '../services/screen';
import { Hoshi } from 'react-native-textinput-effects';
import { observable } from 'mobx';
import Icon from 'react-native-vector-icons/dist/Ionicons';
import { inject, observer } from 'mobx-react';

@inject('appStore')
@observer
export default class HoshiTextInput extends Component {
  @observable
  pwDisable = true
  constructor(props) {
    super(props);
    this.store = props.appStore;
  }
  render() {
    return (
      <View style={{ alignItems: 'center', justifyContent: 'center', }}>
        <Hoshi
          style={{ width: width - 60, marginTop: 10 }}
          labelStyle={{ fontSize: 14, color: colors.labelColor }}
          inputStyle={{ color: 'black', fontWeight: '300', fontSize: 14 }}
          label={this.props.placeholder}
          inputPadding={16}
          labelHeight={24}
          borderHeight={1}
          borderColor={'white'}
          value={this.props.value}
          onChangeText={this.props.onChangeText}
          borderHeight={2}
          secureTextEntry={this.props.password ? this.pwDisable : this.props.secureTextEntry}
          returnKeyType={this.props.returnKeyType}
          ref={input => this.props.inputRef && this.props.inputRef(input)}
          onFocus={this.props.onFocus}
          onSubmitEditing={this.props.onSubmitEditing && this.props.onSubmitEditing} />
        {this.props.password ? (<TouchableOpacity style={{ position: 'absolute', right: 10, bottom: 15 }}
          onPress={() => { this.pwDisable = !this.pwDisable }}>
          <Icon name={this.pwDisable ? 'eye-off-outline' : 'eye-outline'} size={20} />
        </TouchableOpacity>) : (<View></View>)}
      </View>
      //   />

    );
  }
};

