import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  View,
  TextInput,
  TouchableOpacity,
  SafeAreaView,
  Keyboard,
  TouchableWithoutFeedback
} from "react-native";
import { observable } from "mobx";
import { observer, inject } from "mobx-react/native";
import Text from "react-native-text";
import theme from "../../config/colors";
import firebase from "react-native-firebase";
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 CodeInput from "react-native-confirmation-code-input";
const size = new Size();
import Toast, { DURATION } from "react-native-easy-toast";
import Countdown, { CountdownStatus } from "rn-countdown";
import { Fonts } from "../../config/fonts";

@inject(["userStore"])
@observer
export default class SignUpVerify extends Component {
  @observable
  resend = false;

  @observable
  signInData = {
    email: "",
    countryCode: "852",
    mobile: "",
    pwd: "",
    name: "",
    verificationCode:""
  };

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

  componentDidMount() {
    //   this.startToCount();
  }

  componentWillUnmount = () => {
    // clearInterval(this.interval);
  };

  state = { checked: false };

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

  startToCount() {
    this.interval = setInterval(() => {
      this.count();
    }, 1000);
  }

  count() {
    this.store.countdown -= 1;
    if (this.store.countdown == 0) {
      this.resend = true;
      clearInterval(this.interval);
    }
  }

  signupAction() {
    if(this.store.signUpData.verificationCode == "" || this.store.signUpData.verificationCode == null){
        this.refs.toast.show('Please enter the verification no.')
    }else{
    this.store.signupPost( this);
    }
  }

  resendAction() {
    this.store.countdown = 10;
    this.resend = false;
    this.startToCount();
  }

  handleClickCountdown = () => {
    var bodyFormData = new FormData();

    bodyFormData.append("country_code", "852");
    bodyFormData.append("phone_number",this.store.signUpData.mobile.toString() );

    this.store.sendsmsVerify(bodyFormData, this);
  };

  startToCountDown = () => {
    this.countdown && this.countdown.startCountdown();
  };

  handleNetworkFailed = () => alert("network failed");

  handleStopCountdown = () => this.countdown && this.countdown.stopCountdown();

  countDownButton() {
    return (
      <View style={{ flex: 1 }}>
        <Countdown
          ref={r => (this.countdown = r)}
          time={60}
          onPress={this.handleClickCountdown}
          onNetworkFailed={this.handleNetworkFailed}
          onDidFinishCountdown={this.handleCountdownOver}
        >
          {({ status, time }) => {
            let title, containerStyle, titleStyle;
            switch (status) {
              case CountdownStatus.Idle:
                title = "send";
                containerStyle = styles.countdown;
                titleStyle = styles.countdownTitle;
                break;
              case CountdownStatus.Counting:
                title = `sent(${time})`;
                containerStyle = styles.countdown;
                titleStyle = styles.countdownTitle;
                break;
              case CountdownStatus.Over:
                title = "resend";
                containerStyle = styles.countdown;
                titleStyle = styles.countdownTitle;
                break;
            }
            return (
              <View style={containerStyle}>
                <Text style={titleStyle}>{title}</Text>
              </View>
            );
          }}
        </Countdown>
      </View>
    );
  }

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

              <View
                style={{
                  backgroundColor: theme.inputBgc,
                  marginLeft: 20,
                  marginRight: 20,
                  marginTop: 30,
                  height: verticalScale(40),
                  borderRadius: 5,
                  justifyContent: "center"
                }}
              >
                <Text
                  style={{
                    // backgroundColor:theme.inputBgc,
                    color: theme.foodNameColor,
                    fontSize: 15,
                    paddingRight: 30,
                    paddingLeft: 30,
                    fontFamily: Fonts.century
                  }}
                  underlineColorAndroid="rgba(0,0,0,0)"
                >
                  {this.store.signUpData.mobile}
                </Text>
              </View>

              <View
                style={{
                  marginLeft: 20,
                  marginRight: 20,
                  marginTop: 30,
                  flexDirection: "row",
                  justifyContent: "space-between"
                }}
              >
                {this.countDownButton()}

                <View
                  style={{
                    backgroundColor: theme.inputBgc,
                    marginLeft: 10,
                    alignItems: "center",
                    justifyContent: "center",
                    height: verticalScale(40),
                    borderRadius: 5,
                    flex: 1
                  }}
                >
                  <TextInput
                    style={{
                      // backgroundColor:theme.inputBgc,
                      color: theme.foodNameColor,
                      fontSize: size.getSize(12),
                      paddingRight: 30,
                      paddingLeft: 40,
                      fontFamily: Fonts.century,
                      alignSelf: 'stretch'
                    }}
                    onChangeText = {(text)=>this.store.signUpData.verificationCode = text}
                    keyboardType = {'numeric'}
                    underlineColorAndroid="rgba(0,0,0,0)"
                    placeholder="verification no."
                    placeholderStyle={{
                      fontWeight: "bold",
                      fontFamily: Fonts.century,
                      fontSize: size.getSize(10)
                    }}
                    placeholderTextColor={theme.foodNameColor}
                  />
                </View>
              </View>

              <View
                style={{
                  justifyContent: "center",
                  alignItems: "center",
                  height: 60,
                  width: "100%"
                }}
              >
          
              </View>
            </View>

            <Toast ref="toast" />
            <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>
          </View>
        </TouchableWithoutFeedback>
      </SafeAreaView>
    );
  }
}

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

  mainContainer: {
    width: width,
    flex: 1
  },

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

  signupButton: {
    width: width,
    height: verticalScale(50)
  },
  phoneCell: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: 15,
    height: 40,
    borderBottomWidth: 1,
    borderColor: "#ebebeb",
    width: width,
    backgroundColor: "#fff"
  },
  phoneInfo: {
    flexDirection: "row",
    alignItems: "center"
  },
  input: {
    height: 30,
    width: width * 0.4,
    marginLeft: 10,
    padding: 0,
    fontSize: 14
  },
  countdown: {
    borderRadius: 5,
    borderWidth: 2,
    borderColor: theme.coolGrey,
    height: verticalScale(40),
    justifyContent: "center",
    alignItems: "center"
  },
  countdownTitle: {
    color: theme.coolGrey,
    fontSize: 12
  },
  signupButton: {
    backgroundColor: theme.mainColor,
    width: width,
    height: verticalScale(60),
    justifyContent: "center",
    alignItems: "center"
  }
});