import React from 'react';
import {
  SafeAreaView,
  Text,
  View,
  TouchableOpacity,
  Image,
  TextInput,
  Keyboard,
} from 'react-native';
import { inject, observer } from "mobx-react"
import { observable, makeObservable } from 'mobx'
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 AntDesignIcon from 'react-native-vector-icons/AntDesign';
import CustomTextInput from '../../components/customTextInput';
import CustomSignupInput from '../../components/customSignupInput';
import CustomLoginButton from '../../components/customLoginButton';
import { Colors } from 'react-native-paper';

Icon.loadFont();
AntDesignIcon.loadFont();

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

  signupData = {
    name: '',
    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: '#FFFBF4',
        }}>
        <View
          style={{
            // backgroundColor: '#FFFBF4',
            justifyContent: 'center',
          }}>
          <TouchableOpacity
            style={{
              height: 60,
              width: 60,
              justifyContent: 'center',
              alignItems: 'center',
            }}
            onPress={() => {
              this.props.navigation.goBack();
            }}>
            <Icon name="ios-arrow-back" color={colors.mainColor} size={40} />
          </TouchableOpacity>
        </View>
        <KeyboardAwareScrollView>
          <View
            style={{
              //backgroundColor: '#FFFBF4',
              alignItems: 'center',
            }}>
            <View
              style={{
                height: 130,
                width: 130,
                borderRadius: 130,
                backgroundColor: colors.profileBg,
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <AntDesignIcon
                name="user"
                color={colors.signupInputBgc}
                size={80}
              />
            </View>
            <Text
              style={{
                fontWeight: '800',
                color: colors.mainColor,
                fontSize: 25,
                marginTop: 20,
              }}>
              {'Create Account'}
            </Text>
            <View
              style={{
                width: 100,
                height: 3,
                backgroundColor: colors.mainColor,
                marginTop: 10,
              }}
            />
            <CustomSignupInput
              title={this.store.text.firstName}
              value={this.signupData.name}
              onChangeText={text => {
                this.signupData.name = text;
              }}
              returnKeyType={'next'}
              secureTextEntry={false}
              onSubmitEditing={event => {
                this.emailInput.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;
              }}
            /> */}
            <CustomSignupInput
              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;
              }}
            />
            <CustomSignupInput
              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;
              }}
            />
            <CustomSignupInput
              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;
              }}
            />
            <CustomSignupInput
              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;
              }}
            />

            <TouchableOpacity
              onPress={() => {
                this.signupAction();
              }}
              style={{
                height: 60,
                width: 60,
                backgroundColor: colors.mainColor,
                marginTop: 30,
                borderRadius: 50,
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <Icon name="arrow-forward-outline" color="white" size={30} />
            </TouchableOpacity>
          </View>
        </KeyboardAwareScrollView>
        <Toast
          ref="toast"
          style={{ backgroundColor: 'white' }}
          position="center"
          positionValue={100}
          fadeInDuration={750}
          fadeOutDuration={2000}
          opacity={0.8}
          textStyle={{ color: 'black' }}
        />
      </SafeAreaView>
    );
  }
}))
export default Signup
