import React, { Component } from "react";
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Image
} from "react-native";
import myQuestion from "./myQuestion";
import MsgNotification from "./MsgNotification";
import PersonalInfo from "./PersonalInfo";

export default class Mine extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "哈哈哈",
      identity: "职业代理人"
    };
  }
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          style={styles.header}
          onPress={() => {
            this.props.navigator.push({
              component: PersonalInfo,
              passProps: {
                name: this.state.name,
                identity: this.state.identity
              }
            });
          }}
        >
          <View style={styles.headerLeft}>
            <Image
              source={require("../../assets/Mine/iconpic1.png")}
              style={styles.mineIcon}
            />
            <Text style={styles.mineName}>{this.state.name}</Text>
          </View>
          <Image
            source={require("../../assets/Mine/rightArrow_white.png")}
            style={styles.headerRight}
          />
        </TouchableOpacity>
        <View style={styles.midContainer}>
          <TouchableOpacity
            style={styles.itemContainer}
            onPress={() => {
              this.props.navigator.push({
                component: MsgNotification,
                passProps: {}
              });
            }}
          >
            <View style={styles.itemLeft}>
              <Image
                style={styles.leftIcon}
                source={require("../../assets/tabbar/ic_circle_s.png")}
              />
              <Text style={styles.leftTitle}>消息通知</Text>
              <Text style={styles.leftNum}> (11)</Text>
            </View>
            <Image
              style={styles.itemRight}
              source={require("../../assets/Mine/rightArrow_gray.png")}
            />
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.itemContainer}
            onPress={() => {
              this.props.navigator.push({
                component: myQuestion,
                passProps: {}
              });
            }}
          >
            <View style={styles.itemLeft}>
              <Image
                style={styles.leftIcon}
                source={require("../../assets/tabbar/ic_circle_s.png")}
              />
              <Text style={styles.leftTitle}>我的提问</Text>
            </View>
            <Image
              style={styles.itemRight}
              source={require("../../assets/Mine/rightArrow_gray.png")}
            />
          </TouchableOpacity>
        </View>
        <TouchableOpacity
          style={styles.loginOut}
          onLogin={this.props.onLogin}
          onPress={() => {
            this.loginOut();
          }}
        >
          <Text style={styles.loginOutText}>退出登录</Text>
        </TouchableOpacity>
      </View>
    );
  }

  loginOut() {
    console.log("看看this是什么", this);
    this.props.onLogin(false);
  }
}

class BarList extends Component {
  render() {
    return (
      <View>
        <ListItem title={"消息通知"} num={"11"} />
        <ListItem title={"我的提问"} />
      </View>
    );
  }
}

class ListItem extends Component {
  render() {
    return (
      <TouchableOpacity style={styles.itemContainer}>
        <View style={styles.itemLeft}>
          <Image
            style={styles.leftIcon}
            source={require("../../assets/tabbar/ic_circle_s.png")}
          />
          {/* <Image style={styles.leftIcon} source={require("../../assets/Mine/iconpic1.png")} /> */}
          <Text style={styles.leftTitle}>{this.props.title}</Text>
          {this.props.num ? (
            <Text style={styles.leftNum}> ({this.props.num})</Text>
          ) : null}
        </View>
        <Image
          style={styles.itemRight}
          source={require("../../assets/Mine/rightArrow_gray.png")}
        />
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "stretch",
    backgroundColor: "#EFEFEF",
    paddingTop: 64
  },
  header: {
    backgroundColor: "#1B9341",
    height: 78,
    flexDirection: "row",
    justifyContent: "space-between",
    paddingLeft: 13,
    paddingRight: 13,
    alignItems: "center",
    marginBottom: 10
  },
  headerLeft: {
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center"
  },
  mineIcon: {
    width: 46,
    height: 46,
    marginRight: 14
  },
  mineName: {
    fontSize: 16,
    lineHeight: 22,
    color: "#fff"
  },
  headerRight: {
    width: 14,
    height: 14
  },
  midContainer: {
    // marginTop: 10,
    // marginBottom: 10,
    // height: 92,
  },
  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"
  },
  leftNum: {
    fontSize: 15,
    color: "#EE6723"
  },
  itemRight: {
    width: 14,
    height: 14
  },
  loginOut: {
    marginTop: 10,
    height: 46,
    backgroundColor: "#fff",
    justifyContent: "center"
  },
  loginOutText: {
    textAlign: "center",
    fontSize: 15
  }
});