import React, { Component } from 'react';
import {
  View,
  Text,
  TouchableHighlight,
  StyleSheet,
  TouchableOpacity,
  Keyboard,
  Linking,
  TextInput,
} from 'react-native';
import Loading from '../../components/Loading';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import { width, height } from '../../services/screen';
import Icon from 'react-native-vector-icons/dist/MaterialCommunityIcons';
import { colors } from '../../assets/styles/colors-theme';
import Toast, { DURATION } from 'react-native-easy-toast';
import CommonTextInput from '../../components/commonTextInput';
import { inject, observer } from "mobx-react"
import { observable, makeObservable } from 'mobx'
const countryCodeDropDownData = [
  { value: '852', label: '+852' },
  { value: '86', label: '+86' },
  { value: '886', label: '+886' },
];
const ForgotPassword = inject("appStore")(observer(class ForgotPassword extends React.Component {

  phoneVerification = '';

  sendstate = true;

  countryCode = '+852';

  phone = '';

  newPassword = '';

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

      sendstate: observable,

      countryCode: observable,

      phone: observable,

      newPassword: observable,

      confirmPassword: observable,
    })
  }
  componentWillMount() {
    // this.signupData = this.props.navigation.state.params.signupData;
  }

  ForgotPasswordAction() {
    if (this.phoneVerification != '') {
      if (this.phone != '') {
        if (this.newPassword.length >= 8) {
          if (this.confirmPassword.length >= 8) {
            if (this.newPassword == this.confirmPassword) {
              var data = {
                ver_code: this.phoneVerification.toString(),
                mobile: this.phone.toString(),
                country_code: '+852',
                password: this.newPassword,
              };
              this.store.forgotPassword(data, this);
            } else {
              this.refs.toast.show(
                this.store.text
                  .theNewPasswordDoesNotMatchTheNwConfirmedPassword,
              );
            }
          } else {
            this.refs.toast.show(
              this.store.text
                .yourNewConfirmationPasswordMustBeAtLeast8Characters,
            );
          }
        } else {
          this.refs.toast.show(
            this.store.text.yourNewConfirmationPasswordMustBeAtLeast8Characters,
          );
        }
      } else {
        this.refs.toast.show(this.store.text.pleaseEnterYourPhoneNumber);
      }
    } else {
      this.refs.toast.show(this.store.text.pleaseEnterVerificationCode);
    }
  }

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

  startToCount() {
    this.interval = setInterval(() => {
      this.count();
    }, 1000);
  }
  resendAction() {
    this.store.countdown = 10;
    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 data = {
      country_code: '+852',
      mobile: this.phone.toString(),
    };
    this.store.sendsmsVerify(data, this);
  }

  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.phone != '') {
      if (this.newPassword.length >= 8) {
        if (this.confirmPassword.length >= 8) {
          if (this.newPassword == this.confirmPassword) {
            if (this.sendstate) {
              this.handleClickCountdown();
              clearInterval(this.interval);
              this.store.timer = 60;
              this.sendstate = false;
              this.startToCount();
            }
          } else {
            this.refs.toast.show(
              this.store.text.theNewPasswordDoesNotMatchTheNwConfirmedPassword,
            );
          }
        } else {
          this.refs.toast.show(
            this.store.text.yourNewConfirmationPasswordMustBeAtLeast8Characters,
          );
        }
      } else {
        this.refs.toast.show(this.store.text.pleaseEnterYourPhoneNumber);
      }
    } else {
      this.refs.toast.show(this.store.text.pleaseEnterYourPhoneNumber);
    }
  }

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

  countDownButton() {
    return <View style={{ flex: 1 }}></View>;
  }

  render() {
    return (
      <View style={{ flex: 1, backgroundColor: 'white' }}>
        <Loading loading={this.store.loading} />
        {/* <View style={{ flex: 0.07, backgroundColor: colors.mainColor, justifyContent: 'center', }}>
                    <Icon name={'arrow-left'}
                        size={22}
                        color={'white'}
                        style={{ marginLeft: 20 }} />

                </View> */}

        <View style={{ flex: 1, width: width, marginTop: 10 }}>
          <KeyboardAwareScrollView>
            <View style={{ flex: 1, alignItems: 'center' }}>
              <Icon
                style={{ marginTop: 10 }}
                name={'lock-question'}
                color={colors.mainColor}
                size={100}
              />
              <Text
                style={{
                  margin: 30,
                  fontSize: 15,
                  color: colors.textColor,
                  textAlign: 'center',
                }}>
                {this.store.text.pleasePressTheSendButton}
              </Text>
              <View
                style={{
                  borderBottomColor: colors.textColor,
                  borderBottomWidth: 1,
                  flexDirection: 'row',
                  marginLeft: 30,
                  marginRight: 30,
                  marginTop: 10,
                  height: 40,
                  borderRadius: 5,
                }}>
                <TextInput
                  style={{
                    // backgroundColor:theme.inputBgc,
                    flex: 1,
                    color: colors.textColor,
                    height: 35,
                    marginBottom: 30,
                    paddingBottom: 0,
                    fontSize: 13,
                    paddingRight: 20,
                    paddingLeft: 20,
                  }}
                  value={this.phone}
                  underlineColorAndroid="rgba(0,0,0,0)"
                  onChangeText={phone => (this.phone = phone)}
                  placeholder={this.store.text.mobilephone}
                  placeholderStyle={{ fontWeight: 'bold' }}
                  placeholderTextColor={colors.textColor}
                  blurOnSubmit={false}
                  returnKeyType={'next'}
                  onSubmitEditing={event => {
                    this.passwordInput.focus();
                  }}
                />
              </View>
              <View style={{ width: width }}>
                <CommonTextInput
                  placeholder={this.store.text.newPassword}
                  returnKeyType={'next'}
                  inputRef={input => {
                    this.passwordInput = input;
                  }}
                  secureTextEntry={true}
                  value={this.password}
                  onChangeText={password => (this.newPassword = password)}
                  onSubmitEditing={event => {
                    this.confirmPasswordInput.focus();
                  }}
                />
              </View>
              <View style={{ width: width }}>
                <CommonTextInput
                  placeholder={this.store.text.repeatNewPassword}
                  returnKeyType={'done'}
                  inputRef={input => {
                    this.confirmPasswordInput = input;
                  }}
                  secureTextEntry={true}
                  value={this.confirmPassword}
                  onChangeText={confirmPassword =>
                    (this.confirmPassword = confirmPassword)
                  }
                />
              </View>

              <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,
                  flexDirection: 'row',
                  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,
                      paddingRight: 40,
                      paddingLeft: 40,

                      alignSelf: 'stretch',
                      textAlign: 'center',
                    }}
                    onChangeText={text =>
                      (this.phoneVerification = text.toString())
                    }
                    keyboardType={'numeric'}
                    underlineColorAndroid="rgba(0,0,0,0)"
                    placeholder={this.store.text.verificationCode}
                    placeholderStyle={{
                      fontWeight: 'bold',

                      fontSize: 10,
                    }}
                    placeholderTextColor={colors.textColor}
                  />
                </View>
              </View>

              <View
                style={{
                  justifyContent: 'center',
                  alignItems: 'center',
                  height: 60,
                  width: '100%',
                }}></View>
            </View>
          </KeyboardAwareScrollView>
          <TouchableHighlight
            style={styles.buttonView}
            onPress={() => {
              this.ForgotPasswordAction();
            }}>
            <Text style={styles.buttonText}>{this.store.text.sure}</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: {
    color: colors.textColor,

    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 ForgotPassword