import React from 'react';
import {
  SafeAreaView,
  Text,
  View,
  TouchableOpacity,
  Image,
  TextInput,
  Keyboard,
} from 'react-native';

import { images } from '../../assets/images/imageIndex';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import { width, height } from '../../services/screen';
import Toast, { DURATION } from 'react-native-easy-toast';
import { colors } from '../../assets/styles/colors-theme';
import Icon from 'react-native-vector-icons/dist/Ionicons';
import CustomTextInput from '../../components/customTextInput';
import CustomLoginButton from '../../components/customLoginButton';
import { inject, observer } from "mobx-react"
import { observable, makeObservable } from 'mobx'
Icon.loadFont();
const Signup = inject("appStore")(observer(class Signup extends React.Component {

  signupData = {
    first_name: '',
    last_name: '',
    welcome_code: '',
    country_code: '+852',
    mobile: '',
    email: '',
    ver_code: '',
    password: '',
  };
  confirmPassword = '';

  constructor(props) {
    super(props);
    this.store = props.appStore;

    makeObservable(this, {
      signupData: observable,
      confirmPassword: observable
    }
    )
  }
  renderThirdPartyLogin(name) {
    return (
      <View
        style={{
          backgroundColor: 'white',
          height: 50,
          borderRadius: 30,
          width: width - 40,
          justifyContent: 'center',
          alignItems: 'center',
          marginTop: 20,
        }
        } >
        {name === 'facebook' ? (
          <Image
            style={{ position: 'absolute', left: 20 }}
            source={images.signIn.facebook}
          />
        ) : (
          <Image
            style={{ position: 'absolute', left: 20 }}
            source={images.signIn.google}
          />
        )}
        <Text style={{ fontWeight: 'bold', color: colors.titleColor }}>
          {name === 'facebook' ? 'Facebook Login' : 'Google Login'}
        </Text>
      </View >
    );
  }

  signupAction() {
    if (this.signupData.mobile.length >= 8) {
      if (this.signupData.password != null || this.signupData.password != '') {
        if (this.signupData.password.length >= 8) {
          if (this.confirmPassword != null || this.confirmPassword != '') {
            if (this.confirmPassword == this.signupData.password) {
              if (this.signupData.first_name != '') {
                if (this.signupData.last_name != '') {
                  //action
                  this.store.checkMember(this.signupData, this);
                } else {
                  this.refs.toast.show(this.store.text.pleaseInputLastName);
                }
              } else {
                this.refs.toast.show(this.store.text.pleaseInputFirstName);
              }
            } else {
              this.refs.toast.show(
                this.store.text.thePasswordDoesNotMatchTheConfirmedPassword,
              );
            }
          } else {
            this.refs.toast.show(this.store.text.pleaseEnterConfirmPassword);
          }
        } else {
          this.refs.toast.show(
            this.store.text.yourPasswordMustBeAtLeast8Characters,
          );
        }
      } else {
        this.refs.toast.show(this.store.text.pleaseEnterPassword);
      }
    } else {
      this.refs.toast.show(
        this.store.text.PleaseInputYourRightMobilePhoneNumber,
      );
    }
  }
  render() {
    return (
      <SafeAreaView
        style={{
          flex: 1,
          backgroundColor: colors.mainColor,
        }}>
        <View
          style={{
            backgroundColor: colors.mainColor,
            justifyContent: 'center',
          }}>
          <TouchableOpacity
            style={{
              height: 60,
              width: 60,
              justifyContent: 'center',
              alignItems: 'center',
            }}
            onPress={() => {
              this.props.navigation.goBack();
            }}>
            <Icon name="ios-arrow-back" color="white" size={40} />
          </TouchableOpacity>
        </View>
        <KeyboardAwareScrollView>
          <View
            style={{
              backgroundColor: colors.mainColor,
              alignItems: 'center',
            }}>
            <CustomTextInput
              title={this.store.text.firstName}
              value={this.signupData.first_name}
              onChangeText={text => {
                this.signupData.first_name = text;
              }}
              returnKeyType={'next'}
              secureTextEntry={false}
              onSubmitEditing={event => {
                this.lastnameInput.focus();
              }}
            />
            <CustomTextInput
              title={this.store.text.lastName}
              value={this.signupData.last_name}
              onChangeText={text => {
                this.signupData.last_name = text;
              }}
              returnKeyType={'next'}
              secureTextEntry={false}
              onSubmitEditing={event => {
                this.emailInput.focus();
              }}
              inputRef={input => {
                this.lastnameInput = input;
              }}
            />
            <CustomTextInput
              title={this.store.text.email}
              value={this.signupData.email}
              keyboardType={'email-address'}
              onChangeText={text => {
                this.signupData.email = text;
              }}
              returnKeyType={'next'}
              secureTextEntry={false}
              onSubmitEditing={event => {
                this.phoneInput.focus();
              }}
              inputRef={input => {
                this.emailInput = input;
              }}
            />
            <CustomTextInput
              title={this.store.text.mobilephone}
              value={this.signupData.mobile}
              keyboardType={'phone-pad'}
              onChangeText={text => {
                this.signupData.mobile = text;
              }}
              returnKeyType={'next'}
              secureTextEntry={false}
              onSubmitEditing={event => {
                this.passwordInput.focus();
              }}
              inputRef={input => {
                this.phoneInput = input;
              }}
            />
            <CustomTextInput
              title={this.store.text.password}
              value={this.signupData.password}
              onChangeText={text => {
                this.signupData.password = text;
              }}
              returnKeyType={'next'}
              secureTextEntry={true}
              onSubmitEditing={event => {
                this.confirmPasswordInput.focus();
              }}
              inputRef={input => {
                this.passwordInput = input;
              }}
            />
            <CustomTextInput
              title={this.store.text.confirmPassword}
              value={this.confirmPassword}
              onChangeText={text => {
                this.confirmPassword = text;
              }}
              returnKeyType={'done'}
              secureTextEntry={true}
              onSubmitEditing={event => {
                Keyboard.dismiss();
              }}
              inputRef={input => {
                this.confirmPasswordInput = input;
              }}
            />
            <View
              style={{
                width: width,
                flexDirection: 'row',
                marginTop: 20,
                marginRight: 40,
                alignItems: 'center',
                justifyContent: 'flex-end',
              }}>
              <Text
                style={{
                  fontWeight: 'bold',
                  color: 'white',
                  fontSize: 12,
                  marginRight: 10,
                }}>
                {this.store.text.referralCode + ':'}
              </Text>
              <View
                style={{
                  backgroundColor: 'white',
                  width: 200,
                  height: 22,
                  justifyContent: 'center',
                }}>
                <TextInput
                  style={{ fontSize: 12, padding: 0, margin: 0, marginLeft: 5 }}
                  value={this.signupData.welcome_code}
                  onChangeText={text => (this.signupData.welcome_code = text)}
                />
              </View>
            </View>
            <CustomLoginButton
              title={this.store.text.next}
              onPress={() => {
                // this.props.navigation.navigate('SignUpVerify', {
                //   data: this.signupData,
                // });
                this.signupAction();
              }}
            />
            <View style={{ width: width, alignItems: 'flex-end', marginTop: 20 }}>
              <Image
                style={{ marginRight: 10 }}
                source={images.signIn.illustration}
              />
            </View>
          </View>
        </KeyboardAwareScrollView>
        <Toast
          ref="toast"
          style={{ backgroundColor: 'white' }}
          position="bottom"
          positionValue={100}
          fadeInDuration={750}
          fadeOutDuration={2000}
          opacity={0.8}
          textStyle={{ color: 'black' }}
        />
      </SafeAreaView>
    );
  }
}
))
export default Signup
