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

export default class PersonalInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalVisible: false,
      title: "更改昵称",
      type: "name",
      text: "",
      name: this.props.name,
      identity: this.props.identity,
    };
  }

  setModalVisible(visible,type) {
    this.setState({ modalVisible: visible });
    this.setState({
      type: type,
      title: type == "name" ? "更改昵称" : "更改职业"
    })
  }
  confirmChange() {
    console.log("看看拿到方法没",this);
    if (this.state.type == "name") {
      this.setState({name: this.state.text})
    } else {
      this.setState({identity: this.state.text})
    }
    this.setState({ 
      modalVisible: false,
     });
    //  修改mine组件的属性值，该方法是从mine组件传过来的
    this.props.changeInfo(this.state.type,this.state.text);
  }
  render() {
    const { name, identity } = this.state;
    return (
      <View style={styles.container}>
        <TouchableOpacity
          style={styles.itemContainer}
          onPress={() => {
            this.setModalVisible(true,"name");
          }}
        >
          <Text style={styles.itemLeft}>昵称</Text>
          <View style={styles.itemRight}>
            <Text style={styles.itemContent}>{name}</Text>
            <Image
              style={styles.itemArrow}
              source={require("../../assets/Mine/rightArrow_gray.png")}
            />
          </View>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.itemContainer}
          onPress={() => {
            this.setModalVisible(true,"identity");
          }}
        >
          <Text style={styles.itemLeft}>职业</Text>
          <View style={styles.itemRight}>
            <Text style={styles.itemContent}>{identity}</Text>
            <Image
              style={styles.itemArrow}
              source={require("../../assets/Mine/rightArrow_gray.png")}
            />
          </View>
        </TouchableOpacity>

        {/* 弹出框 */}
        <Modal
          animationType={"slide"}
          transparent={true}
          visible={this.state.modalVisible}
        >
          <View style={styles.modalConatier}>
            <View style={styles.modalWrapper}>
              <Text style={styles.title}>{this.state.title}</Text>
              <TextInput
                style={styles.textInput}
                autoFocus={true}
                value={this.state.text}
                onChangeText={ text => this.setState({ text })}
                selectionColor="#0076FF"
                clearTextOnFocus={true}
                numberOfLines={1}
                clearButtonMode="always"
                keyboardType="default"
              />
              <View style={styles.btns}>
                <TouchableOpacity
                  style={styles.btn}
                  onPress={() => {
                    this.setModalVisible(!this.state.modalVisible);
                  }}
                >
                  <Text style={styles.btnText}>取消</Text>
                </TouchableOpacity>
                <TouchableOpacity
                  style={styles.btn}
                  onPress={() => {
                    this.confirmChange()
                  }}
                >
                  <Text style={styles.btnText}>确定</Text>
                </TouchableOpacity>
              </View>
            </View>
          </View>
        </Modal>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "stretch",
    backgroundColor: "#EFEFEF",
    paddingTop: 74
  },
  itemContainer: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingLeft: 16,
    paddingRight: 16,
    paddingTop: 13,
    paddingBottom: 13,
    marginBottom: 1,
    backgroundColor: "white"
  },
  itemLeft: {
    fontSize: 15,
    color: "#242424"
  },
  itemRight: {
    flexDirection: "row",
    alignItems: "center"
  },
  itemContent: {
    fontSize: 15,
    color: "#7A7A7A",
    marginRight: 6
  },
  itemArrow: {
    width: 14,
    height: 14
  },
  modalConatier: {
    alignItems: "center",
    justifyContent: "center",
    flex: 1,
    backgroundColor: "rgba(0, 0, 0, 0.5)"
  },
  modalWrapper: {
    width: 270,
    height: 180,
    borderRadius: 10,
    backgroundColor: "white",
    // paddingLeft: 20,
    // paddingRight: 20,
    paddingBottom: 10,
    justifyContent: "center",
    alignItems: "center",
  },
  title: {
    fontSize: 17,
    color: "#030303",
    marginLeft: 20,
    position: "absolute",
    top: 38,
    left: 20
  },
  textInput: {
    marginTop: 20,
    marginLeft: 20,
    marginRight: 20,
    width: 150,
    borderStyle: "solid",
    borderColor: "#ccc",
    borderBottomWidth: 0.5,
  },
  btns: {
    position: "absolute",
    bottom: 0,
    height: 44,
    flexDirection: "row",
    borderStyle: "solid",
    borderColor: "#ccc",
    borderTopWidth: 0.5,
  },
  btn: {
    width: 135,
    height: 44,
    justifyContent: "center",
    alignItems: "center",
    borderStyle: "solid",
    borderColor: "#ccc",
    borderLeftWidth: 0.5,
  },
  btnText: {
    color: "#0076FF",
    fontSize: 17,
  }
});