import React from 'react';
import {
  SafeAreaView,
  Text,
  View,
  TouchableOpacity,
  TouchableHighlight,
  Image,
  TextInput,
  Keyboard,
  StyleSheet,
} from 'react-native';
import { inject, observer } from "mobx-react"
import { observable, makeObservable } from 'mobx'
import { images } from '../../assets/images/imageIndex';
import Toast, { DURATION } from 'react-native-easy-toast';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import { width, height } from '../../services/screen';
import { colors } from '../../assets/styles/colors-theme';
var _ = require('lodash');
import Icon from 'react-native-vector-icons/dist/MaterialIcons';
import Icon2 from 'react-native-vector-icons/dist/Ionicons';
import CustomTextInput from '../../components/customTextInput';
import CustomLoginButton from '../../components/customLoginButton';

Icon.loadFont();

const SignUpVerify = inject("appStore")(observer(class SignUpVerify extends React.Component {
  phoneVerification = '';

  signupData = this.props.route.params.data;

  addMobile = this.props.route.params.addMobile;

  sendstate = true;

  countryCode = '852';

  thirdParty = false;

  backupMobile = '';

  constructor(props) {
    super(props);
    this.store = props.appStore;
    this.state = {
      countryCode: '852',
    };
    makeObservable(this, {
      phoneVerification: observable,

      signupData: observable,

      addMobile: observable,

      sendstate: observable,

      countryCode: observable,

      thirdParty: observable,

      backupMobile: observable,
    })
  }
  componentWillMount() { }

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

  startToCount() {
    this.interval = setInterval(() => {
      this.count();
    }, 1000);
  }
  resendAction() {
    this.store.timer = 60;
    this.resend = false;
    this.startToCount();
  }

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

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  handleClickCountdown() {
    var smsData = {
      mobile: this.signupData.mobile.toString(),
      country_code: '+852',
    };
    this.store.sendsmsVerify(smsData, this);
    this.backupMobile = _.cloneDeep(this.signupData.mobile.toString());
  }

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

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

  sendTextReturn() {
    if (this.sendstate) {
      return 'Send';
    } else {
      return this.store.timer.toString();
    }
  }

  sendAction() {
    if (this.sendstate) {
      if (this.signupData.mobile.length > 6) {
        this.handleClickCountdown();
        clearInterval(this.interval);
        this.store.timer = 60;
        this.sendstate = false;
        this.startToCount();
      } else {
        this.refs.toast.show(this.store.text.pleaseEnterYourPhoneNumber);
      }
    }
  }

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

  signupAction() {
    console.log(this.signupData.mobile);
    console.log(this.backupMobile);
    if (!this.addMobile) {
      if (this.signupData.ver_code.length > 0) {
        if (this.backupMobile == this.signupData.mobile) {
          if (this.signupData.name != '') {
            //action
            this.store.signupPost(this, this.signupData);
          } else {
            this.refs.toast.show(this.store.text.pleaseInputLastName);
          }
        } else {
          this.refs.toast.show('與SMS的電話號碼不符');
        }
      } else {
        this.refs.toast.show(this.store.text.pleaseInputVerificationCode);
      }
    } else {
      if (this.backupMobile == this.signupData.mobile) {
        const data = {
          country_code: this.signupData.country_code,
          mobile: this.signupData.mobile,
          ver_code: this.signupData.ver_code,
        };
        this.store.bindMobile(data, this);
      } else {
        this.refs.toast.show('與SMS的電話號碼不符');
      }
    }
  }

  render() {
    return (
      <View style={{ flex: 1, backgroundColor: colors.bgc }}>
        <View style={{ flex: 1, width: width, marginTop: 10 }}>
          <KeyboardAwareScrollView>
            <View style={{ marginTop: 30, flex: 1, alignItems: 'center' }}>
              <Icon
                style={{ marginTop: 20 }}
                name={'sms'}
                color={colors.mainColor}
                size={100}
              />
              <Text
                style={{
                  margin: 30,
                  fontSize: 15,
                  color: colors.textColor,
                  textAlign: 'center',
                }}>
                {this.store.text.pleasePressTheSendButton}
              </Text>

              {this.addMobile ? (
                <View style={{ width: width }}>
                  <View
                    style={{
                      borderBottomColor: colors.textColor,
                      borderBottomWidth: 1,
                      flexDirection: 'row',
                      marginLeft: 30,
                      marginRight: 30,
                      marginTop: 20,
                      height: 40,
                      borderRadius: 5,
                    }}>
                    <TextInput
                      style={{
                        // backgroundColor:theme.inputBgc,
                        flex: 1,
                        color: 'black',
                        height: 35,
                        marginBottom: 30,
                        paddingBottom: 0,
                        fontSize: 13,
                        paddingRight: 20,
                        paddingLeft: 20,
                      }}
                      value={this.signupData.mobile}
                      underlineColorAndroid="rgba(0,0,0,0)"
                      onChangeText={phone => (this.signupData.mobile = phone)}
                      placeholder={this.store.text.mobilephone}
                      placeholderStyle={{ fontWeight: 'bold' }}
                      placeholderTextColor={colors.textColor}
                      secureTextEntry={false}
                      blurOnSubmit={false}
                    />
                  </View>
                  {/* <View
                    style={{
                      borderBottomColor: colors.textColor,
                      borderBottomWidth: 1,
                      flexDirection: 'row',
                      marginLeft: 30,
                      marginRight: 30,
                      marginTop: 20,
                      height: 40,
                      borderRadius: 5,
                    }}>
                    <TextInput
                      style={{
                        // backgroundColor:theme.inputBgc,
                        flex: 1,
                        color: 'black',
                        height: 35,
                        marginBottom: 30,
                        paddingBottom: 0,
                        fontSize: 13,
                        paddingRight: 20,
                        paddingLeft: 20,
                      }}
                      value={this.signupData.first_name}
                      underlineColorAndroid="rgba(0,0,0,0)"
                      onChangeText={first_name =>
                        (this.signupData.first_name = first_name)
                      }
                      placeholder={this.store.text.firstName}
                      placeholderStyle={{fontWeight: 'bold'}}
                      placeholderTextColor={colors.textColor}
                      secureTextEntry={false}
                      blurOnSubmit={false}
                    />
                  </View>
                  <View
                    style={{
                      borderBottomColor: colors.textColor,
                      borderBottomWidth: 1,
                      flexDirection: 'row',
                      marginLeft: 30,
                      marginRight: 30,
                      marginTop: 20,
                      height: 40,
                      borderRadius: 5,
                    }}>
                    <TextInput
                      style={{
                        // backgroundColor:theme.inputBgc,
                        flex: 1,
                        color: 'black',
                        height: 35,
                        marginBottom: 30,
                        paddingBottom: 0,
                        fontSize: 13,
                        paddingRight: 20,
                        paddingLeft: 20,
                      }}
                      value={this.signupData.last_name}
                      underlineColorAndroid="rgba(0,0,0,0)"
                      onChangeText={last_name =>
                        (this.signupData.last_name = last_name)
                      }
                      placeholder={this.store.text.lastName}
                      placeholderStyle={{fontWeight: 'bold'}}
                      placeholderTextColor={colors.textColor}
                      secureTextEntry={false}
                      blurOnSubmit={false}
                    />
                  </View> */}
                </View>
              ) : (
                <Text
                  style={{
                    // backgroundColor:theme.inputBgc,
                    color: colors.mainColor,
                    height: 35,
                    // marginBottom: moderateScale(15),
                    paddingBottom: 0,
                    fontSize: 30,
                  }}>
                  {this.signupData.country_code + ' ' + this.signupData.mobile}
                </Text>
              )}

              <TouchableOpacity
                onPress={() => {
                  this.sendAction();
                }}
                style={{
                  width: 100,
                  height: 50,
                  marginTop: 20,
                  borderRadius: 10,
                  backgroundColor: colors.mainColor,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                <Text style={{ color: 'white' }}>{this.sendTextReturn()}</Text>
              </TouchableOpacity>

              <View
                style={{
                  marginLeft: 20,
                  marginRight: 20,
                  marginTop: 30,

                  justifyContent: 'space-between',
                }}>
                <View
                  style={{
                    backgroundColor: colors.inputBgc,
                    marginLeft: 10,
                    alignItems: 'center',
                    justifyContent: 'center',
                    height: 40,
                    borderRadius: 12,
                    width: 200,
                  }}>
                  <TextInput
                    style={{
                      color: colors.mainColor,
                      fontSize: 15,
                      padding: 0,
                      margin: 0,
                      paddingRight: 40,
                      paddingLeft: 40,
                      alignSelf: 'stretch',
                      textAlign: 'center',
                    }}
                    onChangeText={text =>
                      (this.signupData.ver_code = text.toString())
                    }
                    value={this.signupData.ver_code}
                    keyboardType={'numeric'}
                    underlineColorAndroid="rgba(0,0,0,0)"
                    placeholder={this.store.text.verificationCode}
                    placeholderStyle={{
                      fontWeight: 'bold',
                      fontSize: 10,
                    }}
                    placeholderTextColor={colors.textColor}
                  />
                </View>
                {/* {this.signupData.thirdParty ? (
                  <View
                    style={{
                      backgroundColor: colors.inputBgc,
                      marginLeft: 10,
                      alignItems: 'center',
                      justifyContent: 'center',
                      height: 40,
                      borderRadius: 12,
                      width: 200,
                      marginTop: 20,
                    }}>
                    <TextInput
                      style={{
                        color: colors.mainColor,
                        fontSize: 15,
                        paddingRight: 40,
                        paddingLeft: 40,
                        alignSelf: 'stretch',
                        textAlign: 'center',
                      }}
                      onChangeText={text =>
                        (this.signupData.welcome_code = text)
                      }
                      value={this.signupData.welcome_code}
                      underlineColorAndroid="rgba(0,0,0,0)"
                      placeholder={this.store.text.referralCode}
                      placeholderStyle={{
                        fontWeight: 'bold',
                        fontSize: 10,
                      }}
                      placeholderTextColor={colors.textColor}
                    />
                  </View>
                ) : (
                  <View />
                )} */}
              </View>

              <View
                style={{
                  justifyContent: 'center',
                  alignItems: 'center',
                  height: 60,
                  width: '100%',
                }}></View>
            </View>
          </KeyboardAwareScrollView>
          <TouchableOpacity
            style={{
              height: 60,
              width: 60,
              justifyContent: 'center',
              alignItems: 'center',
              position: 'absolute',
              top: 20,
            }}
            onPress={() => {
              this.props.navigation.goBack();
            }}>
            <Icon2
              name="ios-arrow-back"
              color={colors.mainColor}
              size={40}
            />
          </TouchableOpacity>
          <TouchableHighlight
            style={styles.buttonView}
            onPress={() => {
              this.signupAction();
            }}>
            <Text style={styles.buttonText}>
              {this.addMobile ? 'Add mobile' : this.store.text.register}
            </Text>
          </TouchableHighlight>
        </View>
        <Toast
          ref="toast"
          style={{ backgroundColor: colors.mainColor }}
          position="bottom"
          positionValue={200}
          fadeInDuration={750}
          fadeOutDuration={2000}
          opacity={0.8}
          textStyle={{ color: 'white' }}
        />
      </View>
    );
  }
}))

const styles = StyleSheet.flatten({
  textView: {
    fontSize: 13,
  },
  buttonText: {
    color: '#fff',
  },
  buttonView: {
    backgroundColor: colors.mainColor,
    marginRight: 30,
    marginLeft: 30,
    marginTop: 30,
    marginBottom: 30,
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 10,
  },
  buttonText: {
    fontSize: 15,

    color: 'white',
  },
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: 'white',
  },

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

  loginButton: {
    width: 200,
    height: 50,
    marginTop: 30,
  },

  signupButton: {
    width: width,
    height: 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: colors.textColor,
    height: 40,
    justifyContent: 'center',
    alignItems: 'center',
  },
  countdownTitle: {
    color: colors.textColor,
    fontSize: 12,
  },
  signupButton: {
    backgroundColor: colors.textColor,
    width: width,
    height: 60,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
export default SignUpVerify