import React from 'react';
import {
  SafeAreaView,
  Text,
  View,
  TouchableOpacity,
  Image,
  Keyboard,
  Platform,
  TouchableWithoutFeedback,
  ImageBackground,
} from 'react-native';
import { inject, observer } from "mobx-react"
import { observable, makeObservable } from 'mobx'
import TitleBar from '../../components/titleBar'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import { images } from '../../assets/images/imageIndex';
import { s, vs, ms } from 'react-native-size-matters';
import Toast, { DURATION } from 'react-native-easy-toast';
import { width, height } from '../../services/screen';
import { colors } from '../../assets/styles/colors-theme';
import Icon from 'react-native-vector-icons/dist/Ionicons';
import CheckBox from '@react-native-community/checkbox';
import FontAwsome from 'react-native-vector-icons/FontAwesome';
import CustomTextInput from '../../components/customTextInput';
import HoshiTextInput from '../../components/hoshiTextInput'
import CustomLoginButton from '../../components/customLoginButton';
import { getStatusBarHeight } from 'react-native-status-bar-height';
import I18n from '../../services/i18n'

Icon.loadFont();
FontAwsome.loadFont();

const Signin = inject("appStore")(observer(class Signin extends React.Component {
  rememberMe = true;
  loginUserData = {
    username: '',
    password: '',
  };

  constructor(props) {
    super(props);
    this.store = props.appStore;
    makeObservable(this, {
      loginUserData: observable,
      rememberMe: observable
    })
  }

  loginAction() {
    if (this.loginUserData.username !== '') {
      if (this.loginUserData.password !== '') {
        this.store.loginPost(this, this.loginUserData, true);
      } else {
        this.refs.toast.show('please input pw');
      }
    } else {
      this.refs.toast.show('please input email');
    }
  }

  componentDidMount() {

  }


  async loginWithGoogle() {

  }
  async onAppleButtonPress() {

  }

  async handleResponse() {

  }

  renderRememberMeAndForgotPw() {
    return (
      <View style={{ flex: 1, flexDirection: 'row', marginTop: 30, }}>
        <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
          <CheckBox
            style={{ height: 20, marginLeft: 30 }}
            tintColor={colors.lineColor}
            onFillColor={'white'}
            onTintColor={colors.fontColor}
            onCheckColor={colors.fontColor}
            disabled={false}
            value={this.rememberMe}
            boxType={'square'}
            onValueChange={(newValue) => this.rememberMe = newValue}
          />
          <Text style={{ color: colors.fontColor }}>
            {I18n.t('loginRememberMe')}
          </Text>
        </View>
        <View style={{ flex: 1, alignItems: 'flex-end', justifyContent: 'center' }}>
          <TouchableOpacity>
            <Text style={{ color: colors.fontColor, marginRight: 30 }}>
              {I18n.t('loginForgotPassword')}
            </Text>
          </TouchableOpacity>
        </View>
      </View>
    )
  }


  render() {
    return (
      <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
        <ImageBackground resizeMode='cover' style={{ flex: 1, backgroundColor: colors.bgc }} source={require('../../assets/images/background.png')} >
          <TitleBar navigation={this.props.navigation} back={true} />
          <KeyboardAwareScrollView>

            <View
              style={{
                alignItems: 'center',
              }}>
              <Image source={images.logo} style={{ marginTop: s(40) }} />
              <Text style={{ fontSize: s(20), fontWeight: '800', color: colors.fontColor, marginTop: 20 }}>
                {I18n.t('loginTitle')}
              </Text>
              <HoshiTextInput
                placeholder={I18n.t('registrationEmail')}
                value={this.loginUserData.username}
                onChangeText={text => {
                  this.loginUserData.username = text;
                }}
                returnKeyType={'next'}
                secureTextEntry={false}
                onSubmitEditing={event => {
                  this.passwordinput.focus();
                }}
              />
              <HoshiTextInput
                password={true}
                placeholder={I18n.t('registrationPassword')}
                value={this.loginUserData.password}
                onChangeText={text => {
                  this.loginUserData.password = text;
                }}
                secureTextEntry={true}
                returnKeyType={'done'}
                inputRef={input => {
                  this.passwordinput = input;
                }}
                onSubmitEditing={event => {
                  Keyboard.dismiss();
                }}
              />

              {this.renderRememberMeAndForgotPw()}

              <View style={{ height: 30 }} />
              <CustomLoginButton
                title={I18n.t('loginLogin')}
                onPress={() => {
                  this.loginAction();
                }}
              />

              <TouchableOpacity
                style={{
                  height: 30,
                  width: 200,
                  marginTop: 20,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}
                onPress={() => {
                  this.props.navigation.navigate('Signup');
                }}>
                <Text
                  style={{
                    fontSize: 12,
                    color: colors.fontColor,

                  }}>
                  {I18n.t('loginNoAccount')}
                  <Text
                    style={{
                      fontSize: 12,
                      color: colors.fontColor,
                      fontWeight: '800'

                    }}>
                    {I18n.t('loginRegistration')}
                  </Text>
                </Text>
              </TouchableOpacity>
            </View>
          </KeyboardAwareScrollView>
          <Toast
            ref="toast"
            style={{ backgroundColor: colors.mainColor }}
            position="center"
            positionValue={200}
            fadeInDuration={750}
            fadeOutDuration={2000}
            opacity={0.8}
            textStyle={{ color: 'white' }}
          />

        </ImageBackground>
      </TouchableWithoutFeedback>
    );
  }
}))
export default Signin
