import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  View,
  TextInput,
  TouchableOpacity,
  SafeAreaView,
  Keyboard,
  ScrollView,
  TouchableWithoutFeedback
} from "react-native";
import { observable } from "mobx";
import { KeyboardAccessoryNavigation } from "react-native-keyboard-accessory";
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 theme from "../../config/colors";
import { Fonts } from "../../config/fonts";
import Log from '../../config/log'
import { width, height } from "../../config/screen";
import { Button } from "react-native-elements";
import CommonTextInput from "../../components/Public/commonTextInput";
import api from "../../stores/api";
const size = new Size();
import Toast, { DURATION } from "react-native-easy-toast";
import SignUpInformation from "../signUp/signUpInformation";
import Loader from "../../components/Public/loader";
let log = new Log()
let inputs = [
  {
    //value: this.account,
    // onChangeText: this.loginData.pwd,
    placeholder: "Email/Mobile",
    secureTextEntry: false
    // componentRef: this.first
  },
  {
    //value: this.password,
    //onChangeText: this.loginData.pwd,
    placeholder: "Password",
    secureTextEntry: true
    // componentRef: this.secound
  }
];

@inject(["userStore"])
@observer
export default class Login extends Component {
  loginData = {
    id: "",
    pwd: ""
  };

  data = [
    {
      value: this.account,
      onChangeText: this.loginData.pwd,
      componentRef: this.first
    },
    {
      value: this.password,
      onChangeText: this.loginData.pwd,
      componentRef: this.secound
    }
  ];

  constructor(props) {
    super(props);
    this.store = this.props.userStore;
    inputs = inputs.map((input, index) => ({
      componentRef: React.createRef(),
      value: this.data[index].value,
      onChangeText: this.data[index].onChangeText,
      ...input
    }));

    this.state = {
      activeInputIndex: 0,
      nextFocusDisabled: false,
      previousFocusDisabled: false,
      buttonsDisabled: false,
      buttonsHidden: false
    };
  }

  handleFocus = index => () => {
    this.setState({
      nextFocusDisabled: index === inputs.length - 1,
      previousFocusDisabled: index === 0,
      activeInputIndex: index
    });
  };

  handleFocusNext = () => {
    const { nextFocusDisabled, activeInputIndex } = this.state;
    if (nextFocusDisabled) {
      return;
    }

    //  this.inputs[activeInputIndex + 1].componentRef.focus();
    inputs[1].componentRef.current.focus();
  };

  handleFocusPrevious = () => {
    const { previousFocusDisabled, activeInputIndex } = this.state;
    if (previousFocusDisabled) {
      return;
    }

    inputs[activeInputIndex - 1].componentRef.current.focus();
  };

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

  componentWillMount() {
    console.log("login componentWillMount");
  }

  loginAction() {
    this.store.loginPost(this.loginData, this, true);
    log.firebaseLog('press_login_button',{})
  }
  testing() {
    var bodyFormData = new FormData();

    bodyFormData.append("country_code", "852");
    bodyFormData.append("phone_number", "97726727");

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

  render() {
    console.log("state: ", this.props.navigation.state);
    log.firebaseClass('Login')
    return (
      <SafeAreaView style={{ flex: 1, backgroundColor: theme.mainColor }}>
        <Loader loading={this.store.loading} />
        <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
          <View style={styles.container}>
            <View>
              <Header navigation={this.props.navigation} back={true} />
              <View style={styles.mainContainer}>
                <View style={{ width: width }}>
                  <ScrollView>
                    <CommonTextInput
                      value={this.account}
                      onChangeText={account => (this.loginData.id = account)}
                      placeholder="Email"
                      secureTextEntry={false}
                      returnKeyType={"next"}
                      onSubmitEditing={event => {
                        this.passTextInput.focus();
                      }}
                    />
                    <CommonTextInput
                      value={this.password}
                      onChangeText={password => (this.loginData.pwd = password)}
                      placeholder="Password"
                      inputRef={input => {
                        this.passTextInput = input;
                      }}
                      returnKeyType={"done"}
                      secureTextEntry={true}
                      onSubmitEditing={event => {
                        Keyboard.dismiss()
                      }}
                    />
                  </ScrollView>

                  <TouchableOpacity
                    style={{ alignItems: "flex-end" }}
                    onPress={() => {
                      this.navigatieAction("ForgetPassword");
                    }}
                  >
                    <Text
                      style={{
                        color: theme.forgetTextColor,
                        fontFamily: Fonts.century,
                        fontWeight: "bold",
                        marginRight: 30,
                        marginTop: 5,
                        textDecorationLine: "underline"
                      }}
                    >
                      Forget Password ? Go Reset
                    </Text>
                  </TouchableOpacity>
                </View>
              </View>
              <TouchableOpacity
                style={{ alignItems: "center", marginBottom: 15 }}
                onPress={() => this.navigatieAction("SignUpInformation")}
                // onPress = {()=>this.testing()}
              >
                <Text
                  style={{
                    color: theme.forgetTextColor,
                    fontFamily: Fonts.century,
                    fontWeight: "bold",
                    marginTop: 5,
                    textDecorationLine: "underline"
                  }}
                >
                  No Account ? Go Register
                </Text>
              </TouchableOpacity>
              <Button
                title="Login"
                fontWeight="bold"
                fontSize={size.getSize(18)}
                fontFamily={Fonts.century}
                titleStyle={{
                  color: "white",
                  fontFamily: Fonts.century,
                  fontWeight: "bold",
                  fontSize: 50
                }}
                loadingProps={{
                  size: "large",
                  color: "rgba(111, 202, 186, 1)"
                }}
                buttonStyle={styles.signupButton}
                onPress={() => this.loginAction()}
              />
              <Toast ref="toast" />
            </View>
          </View>
        </TouchableWithoutFeedback>
      </SafeAreaView>
    );
  }
}

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

  TextViewContainer: {
    backgroundColor: theme.inputBgc,
    marginLeft: 20,
    marginRight: 20,
    marginTop: 30,
    height: verticalScale(40),
    borderRadius: 5
  },

  TextView: {
    color: theme.foodNameColor,
    height: verticalScale(35),
    marginBottom: moderateScale(30),
    paddingBottom: 0,
    fontSize: size.getSize(15),
    paddingRight: 20,
    paddingLeft: 20,
    fontFamily: Fonts.century
  },

  mainContainer: {
    flex: 1,
    alignItems: "center",
    marginTop: 10
  },

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

  signupButton: {
    width: width,
    height: verticalScale(60),
    backgroundColor: theme.mainColor
  }
});