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 { inject, observer } from "mobx-react"
import { observable, makeObservable } from 'mobx'
import Icon from 'react-native-vector-icons/dist/Ionicons';

const HoshiTextInput = inject("appStore")(observer(class HoshiTextInput extends React.Component {

  pwDisable = true

  constructor(props) {
    super(props);
    this.store = props.appStore;
    makeObservable(this, {
      pwDisable: observable
    });
  }
  render() {
    return (
      <View style={{ alignItems: 'center', justifyContent: 'center', }}>
        <Hoshi
          style={{ width: width - 60, marginTop: 10 }}
          labelStyle={{ fontSize: 12, color: colors.fontColor }}
          inputStyle={{ color: 'black', fontWeight: '300', fontSize: 12 }}
          label={this.props.placeholder}
          inputPadding={16}
          labelHeight={24}
          borderColor={colors.fontColor}
          passiveColor = {colors.line2Color }
          value={this.props.value}
          onChangeText={this.props.onChangeText}
          borderHeight={1}
          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}
          onBlur = {this.props.onBlur}
          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} color = {colors.line2Color} />
        </TouchableOpacity>) : (<View></View>)}
      </View>
      //   />

    );
  }
}))
export default HoshiTextInput

