import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  View,
  TextInput,
  TouchableOpacity,
  SafeAreaView,
  Keyboard,
  TouchableWithoutFeedback,
  Linking
} from "react-native";
import { observable } from "mobx";
import { observer, inject } from "mobx-react/native";
import Text from "react-native-text";
import Header from "../../components/Public/signInUpHeader";
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
import Size from "../../config/size";
import { width, height } from "../../config/screen";
import { Button } from "react-native-elements";
import CheckBox from "react-native-check-box";
import CommonTextInput from "../../components/Public/commonTextInput";
import api from "../../stores/api";
import theme from "../../config/colors";
import Icon from "react-native-vector-icons/dist/MaterialCommunityIcons";
import { Fonts } from "../../config/fonts";
const size = new Size();
import Toast, { DURATION } from "react-native-easy-toast";
import SignUpVerify from "./signUpVerify";
import Loader from "../../components/Public/loader";
@inject(["userStore"])
@observer
export default class SignUpInformation extends Component {
  @observable
  signInData = {
    email: "",
    countryCode: "852",
    mobile: "",
    pwd: "",
    name: "",
    verificationCode: ""
  };

  constructor(props) {
    super(props);
    this.store = this.props.userStore;
  }

  state = { checked: false, confrimPassword: "" };

  navigatieAction(page) {
    this.props.navigation.navigate(page);
  }

  signupAction() {
    console.log(this.signInData);
    if(this.signInData.mobile.length>=8){
    if (this.state.checked) {
      if (this.signInData.pwd != null || this.signInData.pwd != "") {
        if (this.signInData.pwd.length >= 8) {
          if (this.state.confrimPassword != null || this.state.confrimPassword != "") {
            if (this.state.confrimPassword == this.signInData.pwd) {
              this.store.checkMember(this.signInData, this);
            } else {
              this.refs.toast.show(
                "Password and confirm password is not match"
              );
            }
          } else {
            this.refs.toast.show("Please enter confirm password");
          }
        } else {
          this.refs.toast.show("your password must be at least 8 characters");
        }
      } else {
        this.refs.toast.show("Please enter password");
      }
    } else {
      this.refs.toast.show("Please accept the privacy policy");
    }}else{
      this.refs.toast.show('Please input your right mobile phone number')
    }
  }

  render() {
    return (
      <SafeAreaView style={{ flex: 1, backgroundColor: theme.mainColor }}>
        <Loader loading={this.store.loading} />
        <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
          <View style={styles.container}>
            <View style={{ flex: 1, width: width }}>
              <Header navigation={this.props.navigation} back={true} />

              <View style={styles.mainContainer}>
                <CommonTextInput
                  value={this.signInData.name}
                  onChangeText={name => (this.signInData.name = name)}
                  placeholder="Full Name"
                  secureTextEntry={false}
                  returnKeyType={"next"}
                  onSubmitEditing={event => {
                    this.emailInput.focus();
                  }}
                />

                <CommonTextInput
                  value={this.signInData.email}
                  onChangeText={email => (this.signInData.email = email)}
                  placeholder="Email address"
                  secureTextEntry={false}
                  returnKeyType={"next"}
                  onSubmitEditing={event => {
                    this.mobileInput.focus();
                  }}
                  inputRef={input => {
                    this.emailInput = input;
                  }}
                />

                <CommonTextInput
                  value={this.signInData.mobile}
                  onChangeText={mobile => (this.signInData.mobile = mobile)}
                  placeholder="Mobile number"
                  secureTextEntry={false}
                  returnKeyType={"next"}
                  inputRef={input => {
                    this.mobileInput = input;
                  }}
                  onSubmitEditing={event => {
                    this.passwordInput.focus();
                  }}

                />

                <CommonTextInput
                  value={this.signInData.pwd}
                  onChangeText={pwd => (this.signInData.pwd = pwd)}
                  placeholder="Password"
                  secureTextEntry={true}
                  returnKeyType={"next"}
                  inputRef={input => {
                    this.passwordInput = input;
                  }}
                  onSubmitEditing={event => {
                    this.confrimPasswordInput.focus();
                  }}
                  
                />

                <CommonTextInput
                  value={this.state.confrimPassword}
                  onChangeText={pwd => this.setState({ confrimPassword: pwd })}
                  placeholder="Confirm Password"
                  secureTextEntry={true}
                  inputRef={input => {
                    this.confrimPasswordInput = input;
                  }}
                  returnKeyType={"done"}
                  onSubmitEditing={event => {
                    Keyboard.dismiss()
                  }}
                />

                <View
                  style={{
                    flexDirection: "row",
                    marginTop: 15,
                    marginLeft: 20,
                    marginRight: 20,
                    justifyContent: "space-between",
                    alignItems: "center"
                  }}
                >
                  <CheckBox
                    checkedImage={
                      <Icon
                        color={theme.foodNameColor}
                        size={size.getSize(35)}
                        name="checkbox-marked-outline"
                      />
                    }
                    unCheckedImage={
                      <Icon
                        color={theme.foodNameColor}
                        size={size.getSize(35)}
                        name="square-outline"
                      />
                    }
                    onClick={() =>
                      this.setState({ checked: !this.state.checked })
                    }
                    checkBoxColor={theme.foodNameColor}
                    isChecked={this.state.checked}
                  />
                  <View style={{ paddingRight: 10 }}>
                    <Text
                      style={{
                        fontFamily: Fonts.century,
                        color: theme.foodNameColor
                      }}
                      // onPress={() => {
                      //   //    this.navigatieAction("SignUpVerify");
                      //   Linking.openURL(
                      //     "https://www.hangryfood.co/privacy-statement"
                      //   );
                      // }}
                    >
                      By registering you agree to our
                      <Text
                        style={{
                          fontFamily: Fonts.century,
                          color: theme.mainColor
                        }}
                        onPress={() => {
                          Linking.openURL(
                            "https://www.hangryfood.co/terms-and-conditions"
                          );
                        }}
                      >
                        {" T&Cs "}
                      </Text>
                      <Text
                        style={{
                          fontFamily: Fonts.century,
                          color: theme.foodNameColor
                        }}
                      >
                        and
                      </Text>
                      <Text
                        style={{
                          fontFamily: Fonts.century,
                          color: theme.mainColor
                        }}
                        onPress={() => {
                          Linking.openURL(
                            "https://www.hangryfood.co/privacy-statement"
                          );
                        }}
                      >
                        {" Privacy Policy."}
                      </Text>
                    </Text>
                  </View>
                </View>
              </View>

              <TouchableOpacity
                style={styles.signupButton}
                onPress={() => {
                  this.signupAction();
                }}
              >
                <Text
                  style={{
                    fontSize: 18,
                    fontFamily: Fonts.century,
                    color: "white",
                    fontWeight: "bold"
                  }}
                >
                  Register
                </Text>
                <Text
                  style={{
                    fontSize: 10,
                    fontFamily: Fonts.century,
                    color: "white",
                    fontWeight: "bold"
                  }}
                >
                  No More Hangry
                </Text>
              </TouchableOpacity>
              <Toast ref="toast" />
            </View>
          </View>
        </TouchableWithoutFeedback>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    backgroundColor: "white"
  },

  mainContainer: {
    flex: 1
  },

  loginButton: {
    width: scale(200),
    height: verticalScale(50),
    marginTop: moderateScale(30)
  },

  signupButton: {
    backgroundColor: theme.mainColor,

    height: verticalScale(60),
    justifyContent: "center",
    alignItems: "center"
  }
});