import React, { Component } from "react";
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Image,
  AlertIOS,
  AsyncStorage,
  Button
} from "react-native";
import { StackNavigator, TabNavigator } from "react-navigation";

export default class Mine extends Component {
  constructor(props) {
    super(props);
    this.state = {
      IS_LOGIN: "",
      USER_ID: "",
      NICKNAME: "",
      PROFESSION: "",
    };
    this.saveResponse1 = this.saveResponse1.bind(this);
    this.saveResponse2 = this.saveResponse2.bind(this);
  }
  componentWillMount() {
    var _that = this;
    AsyncStorage.multiGet(["IS_LOGIN","USER_ID","NICKNAME","PROFESSION"],(err, result) => {
      if (err) {
        console.error(err);
      }
      console.log("最初始的四个个值",result)
      _that.setState({
        IS_LOGIN: result[0][1],
        USER_ID: (result[1][1] != null) ? result[1][1].toString() : "",
        NICKNAME: (result[2][1] != null) ? result[2][1].toString() : "",
        PROFESSION: (result[3][1] != null) ? result[3][1].toString() : "",
      })
    })
  }
  componentDidMount() {
    // console.log("hello,AsyncStorage");
  }
  signOut() {
    var _that = this;
    AsyncStorage.multiSet(
      [["IS_LOGIN", "no"], ["USER_ID",""], ["NICKNAME",""],["PROFESSION",""]],
      function (err) { 
        if (err) {
          console.log("存储出错", err);
          return false;
        }
        _that.setState({
          IS_LOGIN: "no",
          USER_ID: "",
          NICKNAME: "",
          PROFESSION: "",
        })
        console.log("退出登录后的值",_that.state)
       }
    )
  }
  saveResponse1(d) {
    if (this.state.IS_LOGIN == "yes") {
      this.setState({ NICKNAME: d });
    }
  }
  saveResponse2(d) {
    if (this.state.IS_LOGIN == "yes") {
      this.setState({ identity: d });
    }
  }
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        {/* 头部头像 */}
        <View style={styles.header}>
          <Image
            source={require("../../assets/Mine/iconpic1.png")}
            style={styles.mineIcon}
          />
        </View>
        <View style={styles.midContainer}>
          {/* 更改昵称 */}
          <TouchableOpacity
            style={styles.itemContainer}
            onPress={() => {
              AlertIOS.prompt("更改昵称", null, this.saveResponse1);
            }}
          >
            <View style={styles.itemLeft}>
              <Image
                style={styles.leftIcon}
                source={require("../../assets/tabbar/ic_circle_s.png")}
              />
              <Text style={styles.leftTitle}>设置昵称</Text>
            </View>
            <View style={styles.itemRight}>
              {this.state.IS_LOGIN === "yes" ? (
                <Text style={styles.itemRightContent}>{this.state.NICKNAME}</Text>
              ) : null}
              <Image
                style={styles.itemRightImg}
                source={require("../../assets/Mine/rightArrow_gray.png")}
              />
            </View>
          </TouchableOpacity>
          {/* 更改职业 */}
          <TouchableOpacity
            style={styles.itemContainer}
            onPress={() => {
              AlertIOS.prompt("更改职业", null, this.saveResponse2);
            }}
          >
            <View style={styles.itemLeft}>
              <Image
                style={styles.leftIcon}
                source={require("../../assets/tabbar/ic_circle_s.png")}
              />
              <Text style={styles.leftTitle}>设置职业</Text>
            </View>
            <View style={styles.itemRight}>
              <Text style={styles.itemRightContent}>{this.state.PROFESSION}</Text>
              {this.state.IS_LOGIN === "yes" ? (
                <Text style={styles.itemRightContent}>
                  {this.state.identity}
                </Text>
              ) : null}
              <Image
                style={styles.itemRightImg}
                source={require("../../assets/Mine/rightArrow_gray.png")}
              />
            </View>
          </TouchableOpacity>
        </View>

        {/* 登录 */}
        <TouchableOpacity
          style={styles.loginOut}
          onLogin={this.props.onLogin}
          onPress={() => {
            this.state.IS_LOGIN == "yes"
              ? this.signOut()
              : navigate("Login", { refreshCallback: (data)=>{
                console.log("refreshCallback参数",data);
                this.setState({
                  IS_LOGIN: data.IS_LOGIN,
                  USER_ID: data.USER_ID,
                  NICKNAME: data.NICKNAME,
                  PROFESSION: data.PROFESSION,
                })
              } });
          }}
        >
          <Text style={styles.loginOutText}>
            {this.state.IS_LOGIN == "yes" ? "退出登录" : "登录"}
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "stretch",
    backgroundColor: "#EFEFEF"
  },
  header: {
    backgroundColor: "#1B9341",
    height: 154,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 10
  },
  mineIcon: {
    width: 86,
    height: 86
  },
  mineName: {
    fontSize: 16,
    lineHeight: 22,
    color: "#fff"
  },
  headerRight: {
    width: 14,
    height: 14
  },
  midContainer: {},
  itemContainer: {
    height: 46,
    paddingLeft: 16,
    paddingRight: 16,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    backgroundColor: "#fff",
    borderStyle: "solid",
    borderColor: "#F0F0F0",
    borderBottomWidth: 1
  },
  itemLeft: {
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center"
  },
  leftIcon: {
    marginRight: 11,
    width: 16,
    height: 16
  },
  leftTitle: {
    fontSize: 15,
    color: "#242424"
  },
  itemRight: {
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center"
  },
  itemRightContent: {
    marginRight: 5
  },
  itemRightImg: {
    width: 14,
    height: 14
  },
  loginOut: {
    marginTop: 10,
    height: 46,
    backgroundColor: "#fff",
    justifyContent: "center"
  },
  loginOutText: {
    textAlign: "center",
    fontSize: 15
  },
  button: {
    // fontSize: 14
  }
});