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

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentWillMount() {}

  componentDidMount() {}

  getListData() {
    post("/test/insurance/article", {}, res => {}, err => {});
  }

  getAllPhone() {
    Contacts.getAll((err, contacts) => {
      if (err && err.type === "permissionDenied") {
      } else {
        let phones = [];
        contacts.forEach((item, index) => {
          item.phoneNumbers.forEach((phone, i) => {
            phones.push(phone.number);
          });
        });
        post(
          "/spreader/rank/friends/contact",
          { contact: phones },
          res => {
            this.getRankData();
          },
          resErr => {
            Toast.show(resErr.cnmsg, Toast.error);
          }
        );
      }
    });
  }

  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        {/* <Begin /> */}
        <Main />
      </View>
    );
  }
}

class Begin extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <View style={styles.beginContaier}>
        <Image
          source={require("../../assets/customer/pic.png")}
          style={styles.beginPic}
        />
        <View style={styles.beginBtnContaier}>
          <TouchableOpacity style={styles.beginBtnLeft}>
            <Text style={styles.beginBtnLeftText}>手动选择</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.beginBtnRight}>
            <Text style={styles.beginBtnRightText}>通信录导入</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

class Main extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <View style={styles.mainContaier}>
        <View style={styles.mainBtnContaier}>
          <TouchableOpacity style={styles.mainBtnContaierLeft}>
            <Image style={styles.mainBtnLeftImg} source={require("../../assets/customer/ic_add.png")} />
            <Text style={styles.mainBtnLeftText}>手动添加</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.mainBtnContaierRight}>
            <Image style={styles.mainBtnRightImg} source={require("../../assets/customer/ic_message.png")} />
            <Text style={styles.mainBtnRightText}>通信录导入</Text>
          </TouchableOpacity>
        </View>
      </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: {},
  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",
  },
});