import React, { Component } from "react";
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  ScrollView,
  TextInput,
  KeyboardAvoidingView
} from "react-native";

export default class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      phone: "",
      password: "",
      // 处于登录还是注册页面
      isRegister: false
    };
  }
  componentDidMount() {
    console.log("thisprops", this.props);
  }
  render() {
    return (
      <View style={styles.container}>
        <KeyboardAvoidingView behavior="padding" style={styles.KAVContainer}>
          <Text style={styles.appName}>保护神</Text>
          <View style={styles.inputField}>
            <Image
              style={styles.icon}
              source={require("../assets/login/ic_phone.png")}
            />
            <TextInput
              style={styles.textInput}
              placeholder="请输入手机号"
              value={this.state.phone}
              onChangeText={phone => this.setState({ phone })}
              autoFocus={true}
              selectionColor="#1B9341"
              clearTextOnFocus={true}
              numberOfLines={1}
              clearButtonMode="always"
              keyboardType="default"
            />
          </View>
          <View style={styles.inputField}>
            <Image
              style={styles.icon}
              source={require("../assets/login/ic_password2.png")}
            />
            <TextInput
              style={styles.textInput}
              placeholder="请输入密码"
              secureTextEntry={true}
              value={this.state.password}
              onChangeText={password => this.setState({ password })}
              selectionColor="#1B9341"
              clearTextOnFocus={true}
              numberOfLines={1}
              clearButtonMode="always"
              keyboardType="default"
            />
          </View>
          {/* 登录/注册 按钮 */}
          {!this.state.isRegister ? (
            <TouchableOpacity
              style={styles.confirmBtnLogin}
              onPress={() => {
                this.loginRequest();
              }}
            >
              <Text style={styles.confirmText}>登录</Text>
            </TouchableOpacity>
          ) : (
            <TouchableOpacity
              style={styles.confirmBtnRegister}
              onPress={() => {
                this.loginRequest();
              }}
            >
              <Text style={styles.confirmText}>注册</Text>
            </TouchableOpacity>
          )}

          {/* 点击切换  不用管这里 */}
          {!this.state.isRegister ? (
            <TouchableOpacity
              style={styles.registerContaier}
              onPress={() => this.setState({ isRegister: !this.state.isRegister })}
            >
              <Text style={styles.register}>注册账号</Text>
            </TouchableOpacity>
          ) : (
            <TouchableOpacity
              style={styles.registerContaier}
              onPress={() => this.setState({ isRegister: !this.state.isRegister })}
            >
              <Text style={styles.register}>登录</Text>
            </TouchableOpacity>
          )}
        </KeyboardAvoidingView>
      </View>
    );
  }

  loginRequest() {
    if (this.props.loginSuccess) return;
    let phone = this.state.phone,
      password = this.state.password;
    if (!/^1(3|4|5|7|8)\d{9}$/.test(phone)) {
      alert("请正确输入手机号码");
      return;
    }
    if (password === "") {
      alert("请输入密码");
      return;
    } else if (password !== "000000") {
      alert("账号密码有误");
      return;
    }
    this.props.onLogin(true);
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 125,
    justifyContent: "flex-start",
    alignItems: "stretch",
    backgroundColor: "#F5FCFF",
    paddingLeft: 38,
    paddingRight: 38
  },
  KAVContainer: {
    flex: 1
    // justifyContent: "center"
  },
  appName: {
    fontSize: 26,
    color: "#030303",
    alignSelf: "center",
    marginBottom: 77
  },
  inputField: {
    flexDirection: "row",
    alignItems: "center",
    borderStyle: "solid",
    borderBottomWidth: 1,
    borderColor: "#E6E6E6",
    height: 51
  },
  icon: {
    width: 11,
    height: 15,
    marginRight: 10
  },
  textInput: {
    flex: 1
  },
  helpContaier: {
    flexDirection: "row",
    justifyContent: "flex-end",
    marginTop: 10
  },
  forgetPassword: {
    color: "#999999",
    fontSize: 14
  },
  confirmBtnLogin: {
    marginTop: 30,
    width: 299,
    height: 45,
    backgroundColor: "#1B9341",
    borderRadius: 5,
    alignItems: "center",
    justifyContent: "center"
  },
  confirmBtnRegister: {
    marginTop: 30,
    width: 299,
    height: 45,
    backgroundColor: "#BBBBBB",
    borderRadius: 5,
    alignItems: "center",
    justifyContent: "center"
  },
  confirmText: {
    color: "#fff",
    fontSize: 16
  },
  registerContaier: {
    alignItems: "center",
    justifyContent: "center"
  },
  register: {
    marginTop: 24,
    color: "#1B9341"
  }
});