import React, { Component } from "react";
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  ScrollView,
  ListView,
  Dimensions,
  AsyncStorage,
  Alert
} from "react-native";
import { StackNavigator, TabNavigator } from "react-navigation";
import post from "../../utils/fetch";
import Contacts from "react-native-contacts";

export default class Customer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      IS_LOGIN: "",
      USER_ID: "",
      NICKNAME: "",
      PROFESSION: "",
      customersList: []
    };
    this.getAllPhone = this.getAllPhone.bind(this);
  }
  componentWillMount() {
    this.getAsyncStorage();
  }

  componentDidMount() {}

  getAllPhone() {
    const { navigate } = this.props.navigation;
    Contacts.getAll((err, contacts) => {
      if (err && err.type === "permissionDenied") {
      } else {
        let customersList = [];
        contacts.forEach((item, index) => {
          customersList.push({
            name: item.familyName + item.givenName,
            phone: item.phoneNumbers[0] ? item.phoneNumbers[0].number : "",
            selected: false
          });
        });
        // console.log("通信录", contacts);
        console.log("通信录", customersList);
        navigate("CustomerImport", { customersList: customersList });
      }
    });
  }

  getAsyncStorage() {
    const that = this;
    const { IS_LOGIN, USER_ID, customersList } = this.state;
    AsyncStorage.multiGet(["IS_LOGIN", "USER_ID"], (err, result) => {
      if (err) {
        console.error(err);
      }
      that.setState(
        {
          IS_LOGIN: result[0][1],
          USER_ID: result[1][1] != null ? result[1][1] : ""
        },
        () => {
          console.log(that.state.USER_ID);
          if (that.state.IS_LOGIN == "yes") {
            post(
              `/test/insurance/contact/get/${that.state.USER_ID}`,
              {},
              res => {
                console.log("我的通信录呢？",res)
                if (res.data.contacts) {
                  that.setState({
                    customersList: res.data.contacts
                  });
                }
              },
              err => {
                console.log("通信录err", err);
                Alert.alert(err);
              }
            );
          }
        }
      );
    });
  }

  _renderBegin() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.beginContaier}>
        <Image
          source={require("../../assets/customer/pic.png")}
          style={styles.beginPic}
        />
        <View style={styles.beginBtnContaier}>
          <TouchableOpacity
            style={styles.beginBtnLeft}
            onPress={() => {
              AsyncStorage.multiGet(["IS_LOGIN", "USER_ID"], (err, result) => {
                if (err) {
                  console.error(err);
                }
                this.setState(
                  {
                    IS_LOGIN: result[0][1],
                    USER_ID: result[1][1] != null ? result[1][1] : ""
                  },
                  () => {
                    if (this.state.IS_LOGIN != "yes") {
                      Alert.alert("请先登录账号");
                    } else {
                      navigate("CustomerEdit",{ todo: "add",item: null });
                    }
                  }
                );
              });
            }}
          >
            <Text style={styles.beginBtnLeftText}>手动添加</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.beginBtnRight}
            onPress={() => {
              AsyncStorage.multiGet(["IS_LOGIN", "USER_ID"], (err, result) => {
                if (err) {
                  console.error(err);
                }
                this.setState(
                  {
                    IS_LOGIN: result[0][1],
                    USER_ID: result[1][1] != null ? result[1][1] : ""
                  },
                  () => {
                    if (this.state.IS_LOGIN != "yes") {
                      Alert.alert("请先登录账号");
                    } else {
                      this.getAllPhone();
                    }
                  }
                );
              });
            }}
          >
            <Text style={styles.beginBtnRightText}>通信录导入</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
  _renderMain() {
    const { customersList } = this.state;
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.mainContaier}>
        <View style={styles.mainBtnContaier}>
          <TouchableOpacity
            style={styles.mainBtnContaierLeft}
            onPress={() => {
              navigate("CustomerEdit", { todo: "add",item: null });
            }}
          >
            <Image
              style={styles.mainBtnLeftImg}
              source={require("../../assets/customer/ic_add.png")}
            />
            <Text style={styles.mainBtnLeftText}>手动添加</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => this.getAsyncStorage()}>
            <Image source={require('../../assets/customer/ic_refresh.png')} style={{width: 50,height: 50}} />
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.mainBtnContaierRight}
            onPress={() => {
              this.getAllPhone();
            }}
          >
            <Image
              style={styles.mainBtnRightImg}
              source={require("../../assets/customer/ic_message.png")}
            />
            <Text style={styles.mainBtnRightText}>通信录导入</Text>
          </TouchableOpacity>
        </View>
        <ScrollView style={styles.mainSvcContainer}>
          {customersList.map((item, index) => {
            return (
              <TouchableOpacity
                key={index}
                style={styles.mainCustomerItem}
                onPress={() =>
                  navigate("CustomerEdit", {
                    item: item,
                    todo: "edit",
                    refreshCallback: this.getAsyncStorage
                  })}
              >
                <Text style={styles.mainCustomerItemText}>{item.name}</Text>
                <Image
                  style={styles.mainCustomerItemImg}
                  source={require("../../assets/customer/rightArrow_gray.png")}
                />
              </TouchableOpacity>
            );
          })}
        </ScrollView>
      </View>
    );
  }

  render() {
    const { navigate } = this.props.navigation;
    const { IS_LOGIN, customers } = this.state;
    return (
      <View style={styles.container}>
        {IS_LOGIN == "yes" ? this._renderMain() : this._renderBegin()}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "stretch",
    backgroundColor: "#EFEFEF"
  },
  beginContaier: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#fff",
    paddingBottom: 50
  },
  beginPic: {
    width: 189,
    height: 193
  },
  beginBtnContaier: {
    flexDirection: "row",
    marginHorizontal: 30,
    marginTop: 40
  },
  beginBtnLeft: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    paddingVertical: 12,
    borderStyle: "solid",
    borderColor: "#A9A9A9",
    borderWidth: 1,
    borderRadius: 5
  },
  beginBtnLeftText: {
    fontSize: 16,
    color: "#242424"
  },
  beginBtnRight: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    paddingVertical: 12,
    marginLeft: 20,
    borderRadius: 5,
    backgroundColor: "#1B9341"
  },
  beginBtnRightText: {
    fontSize: 16,
    color: "white"
  },
  mainContaier: {
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "stretch",
    backgroundColor: "#EFEFEF"
  },
  mainBtnContaier: {
    marginVertical: 10,
    backgroundColor: "white",
    flexDirection: "row",
    justifyContent: "space-around",
    paddingVertical: 13
  },
  mainBtnContaierLeft: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center"
  },
  mainBtnLeftImg: {
    width: 24,
    height: 24
  },
  mainBtnLeftText: {
    marginLeft: 8,
    fontSize: 15,
    color: "#242424"
  },
  mainBtnContaierRight: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center"
  },
  mainBtnRightImg: {
    width: 24,
    height: 24
  },
  mainBtnRightText: {
    marginLeft: 8,
    fontSize: 15,
    color: "#242424"
  },
  mainSvcContainer: {
    flex: 1,
    backgroundColor: "white"
  },
  mainCustomerItem: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    backgroundColor: "white",
    paddingVertical: 12,
    marginLeft: 16,
    marginRight: 10,
    borderStyle: "solid",
    borderColor: "#F2F2F2",
    borderBottomWidth: 1
  },
  mainCustomerItemText: {
    fontSize: 16,
    color: "#202020"
  },
  mainCustomerItemImg: {
    width: 14,
    height: 14
  }
});