import React from 'react';
import {
  SafeAreaView,
  Text,
  View,
  TouchableOpacity,
  Image,
  TextInput,
  Keyboard,
  Linking
} from 'react-native';
import { inject, observer } from 'mobx-react';
import { images } from '../../assets/images/imageIndex';
import FastImage from 'react-native-fast-image'
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 HoshiTextInput from '../../components/hoshiTextInput';
import CustomSignupInput from '../../components/customSignupInput';
import CustomLoginButton from '../../components/customLoginButton';
import TitleBar from '../../components/titleBar';
import { observable } from 'mobx';
import { Colors } from 'react-native-paper';

Icon.loadFont();
AntDesignIcon.loadFont();
@inject('appStore')
@observer
export default class Signup extends React.Component {
  @observable
  signupData = {
    name: '',
    countryCode: '+852',
    mobile: '',
    email: '',
    verCode: '',
    pwd: '',
  };
  @observable
  confirmPassword = '';
  @observable
  signCheck = false;

  constructor(props) {
    super(props);
    this.store = props.appStore;
  }
  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.signCheck) {
      if (this.signupData.mobile.length >= 8) {
        if (this.signupData.pwd != null || this.signupData.pwd != '') {
          if (this.signupData.pwd.length >= 8) {
            if (this.confirmPassword != null || this.confirmPassword != '') {
              if (this.confirmPassword == this.signupData.pwd) {
                if (this.signupData.first_name != '') {
                  if (this.signupData.last_name != '') {
                    //action
                    console.log(this.signupData);
                    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,
        );
      }
    } else {
      this.refs.toast.show(
        this.store.text.pleaseAccept + " " + this.store.text.tearmsOfService + " " + this.store.text.and + " " + this.store.text.privacyPolicy
      );
    }
  }
  render() {
    return (
      <SafeAreaView
        style={{
          flex: 1,
          backgroundColor: 'white',
        }}>
        {/* <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> */}
        <TitleBar
          showBack={true}
          title={this.store.text.createAc}
          self={this}
        />
        <KeyboardAwareScrollView>
          <View
            style={{
              alignItems: 'center',
            }}>
            <View
              style={{
                width: 100,

                marginTop: 70,
              }}
            />
            <HoshiTextInput
              placeholder={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;
              }}
            /> */}
            <HoshiTextInput
              placeholder={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;
              }}
            />
            <HoshiTextInput
              placeholder={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;
              }}
            />
            <HoshiTextInput
              password={true}
              placeholder={this.store.text.password}
              value={this.signupData.pwd}
              onChangeText={text => {
                this.signupData.pwd = text;
              }}
              returnKeyType={'next'}
              secureTextEntry={true}
              onSubmitEditing={event => {
                this.confirmPasswordInput.focus();
              }}
              inputRef={input => {
                this.passwordInput = input;
              }}
            />
            <HoshiTextInput
              password={true}
              placeholder={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={{ flexDirection: 'row', width: width - 60, marginTop: 20, alignItems: 'center' }}>
              <TouchableOpacity onPress={() => {
                this.signCheck = !this.signCheck
              }}>
                <Icon name={this.signCheck ? 'checkbox-outline' : 'square-outline'} size={20} />
              </TouchableOpacity>

              <Text
                style={{
                  marginLeft: 10,
                  color: colors.foodNameColor
                }}
              // onPress={() => {
              //   //    this.navigatieAction("SignUpVerify");
              //   Linking.openURL(
              //     "https://www.hangryfood.co/privacy-statement"
              //   );
              // }}
              >
                {this.store.text.bryato}
                <Text
                  style={{
                    color: colors.mainColor
                  }}
                  onPress={() => {
                    Linking.openURL(
                      "https://puremall.com.hk/#mu-tnc"
                    );
                  }}
                >
                  {" " + this.store.text.tearmsOfService + " "}
                </Text>
                <Text
                  style={{

                    color: colors.foodNameColor
                  }}
                >
                  {" " + this.store.text.and + " "}
                </Text>
                <Text
                  style={{

                    color: colors.mainColor
                  }}
                  onPress={() => {
                    Linking.openURL(
                      "https://puremall.com.hk/#mu-privacy"
                    );
                  }}
                >
                  {this.store.text.privacyPolicy + "."}
                </Text>
              </Text>
            </View>

            <View style={{ marginTop: 60 }} />

            <CustomLoginButton
              title={this.store.text.next}
              onPress={() => {
                this.signupAction();
              }}
            />
          </View>
        </KeyboardAwareScrollView>
        <Toast
          ref="toast"
          style={{ backgroundColor: 'white' }}
          position="center"
          positionValue={100}
          fadeInDuration={750}
          fadeOutDuration={2000}
          opacity={0.8}
          textStyle={{ color: 'black' }}
        />
      </SafeAreaView>
    );
  }
}
