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";

export default class Import extends Component {
  constructor(props) {
    super(props);
    this.state = {
      IS_LOGIN: "",
      USER_ID: "",
      customersList: this.props.navigation.state.params.customersList,
      selected_list: [],
      selected_all: false,
      selected_len: 0
    };
  }
  componentWillMount() {
    this.getAsyncStorage();
  }

  componentDidMount() {
    console.log("导入客户", this.props.navigation.state.params);
  }

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

  getAsyncStorage() {
    const that = this;
    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] : ""
      });
    });
  }

  selectItem(item, index) {
    const { customersList, selected_all, selected_len } = this.state;
    let Temp = customersList;
    console.log(index);
    Temp.splice(index, 1, {
      ...customersList[index],
      selected: !customersList[index].selected
    });
    this.setState({
      customersList: Temp
    });
  }

  selectAll() {
    const { customersList, selected_all, selected_len } = this.state;
    let LEN = customersList.length;
    this.setState(
      {
        selected_all: !this.state.selected_all
      },
      () => {
        if (selected_all) {
          this.setState({
            customersList: customersList.map((item, index) => {
              return {
                ...item,
                selected: false
              };
            })
          });
        } else {
          this.setState({
            customersList: customersList.map((item, index) => {
              return {
                ...item,
                selected: true
              };
            })
          });
        }
      }
    );
  }

  import() {
    const { customersList, USER_ID } = this.state;
    const { goBack } = this.props.navigation;
    let Temp = [];
    for (let i = 0, len = customersList.length; i < len; i++) {
      if (customersList[i].selected) {
        Temp.push(customersList[i]);
      }
    }
    console.log("发送通信录", Temp);
    post(
      `/test/insurance/contact/lot/${USER_ID}`,
      { Temp: Temp },
      res => {
        console.log("导入成功");
        Alert.alert("导入成功", null, () => goBack());
      },
      err => {
        console.log(err);
      }
    );
  }

  render() {
    const { navigate } = this.props.navigation;
    const { customersList, selected_all, selected_len } = this.state;
    let LEN = customersList.length;
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });
    const dataSource = ds.cloneWithRows(customersList);
    return (
      <View style={styles.container}>
        <ListView
          style={styles.mainSvcContainer}
          dataSource={dataSource}
          enableEmptySections={true}
          renderRow={(item, secid, index) => {
            return (
              <TouchableOpacity
                key={index}
                style={styles.CustomerItemContaier}
                onPress={() => {
                  this.selectItem(item, index);
                }}
              >
                <View style={styles.itemSelectIconContainer}>
                  {item.selected ? (
                    <Image
                      style={styles.itemSelectIcon}
                      source={require("../../assets/customer/ic1_s.png")}
                    />
                  ) : (
                    <Image
                      style={styles.itemSelectIcon}
                      source={require("../../assets/customer/ic1_n.png")}
                    />
                  )}
                </View>
                <Text style={styles.CustomerItemText}>{item.name}</Text>
              </TouchableOpacity>
            );
          }}
        />
        <View style={styles.selectBtnContaier}>
          <View style={styles.selectBtnContaierLeft}>
            <TouchableOpacity
              style={styles.selectAllContainer}
              onPress={() => {
                this.selectAll();
              }}
            >
              <View style={styles.selectAllIcon}>
                {selected_all ? (
                  <Image
                    style={styles.allIcon}
                    source={require("../../assets/customer/ic2_s.png")}
                  />
                ) : (
                  <Image
                    style={styles.allIcon}
                    source={require("../../assets/customer/ic2_n.png")}
                  />
                )}
              </View>
              <Text style={styles.selectAllText}>全选</Text>
            </TouchableOpacity>
            <View style={styles.selectedTextContaier}>
              <Text>已选中</Text>
              <Text style={styles.selected_num}>
                {selected_all ? LEN : selected_len}
              </Text>
              <Text>项</Text>
            </View>
          </View>
          <TouchableOpacity
            style={styles.importBtnContaier}
            onPress={() => {
              this.import();
            }}
          >
            <Text style={styles.importBtnText}>导入</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "stretch",
    backgroundColor: "white"
  },
  mainSvcContainer: {
    marginBottom: 50,
    flex: 1
  },
  CustomerItemContaier: {
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center",
    backgroundColor: "white",
    paddingVertical: 12,
    marginLeft: 16,
    marginRight: 10,
    borderStyle: "solid",
    borderColor: "#F2F2F2",
    borderBottomWidth: 1
  },
  itemSelectIconContainer: {
    justifyContent: "center",
    alignItems: "center",
    marginRight: 10
  },
  itemSelectIcon: {
    width: 15,
    height: 15
  },
  CustomerItemText: {
    fontSize: 16,
    color: "#202020"
  },
  selectBtnContaier: {
    position: "absolute",
    bottom: 0,
    backgroundColor: "white",
    height: 49,
    width: Dimensions.get("window").width,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    flex: 1,
    borderColor: "#E4E4E4",
    borderStyle: "solid",
    borderTopWidth: 1
  },
  selectBtnContaierLeft: {
    flexDirection: "row"
  },
  selectAllContainer: {
    marginLeft: 20,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center"
  },
  selectAllIcon: {
    justifyContent: "center",
    alignItems: "center",
    marginRight: 10
  },
  allIcon: {
    width: 22,
    height: 22
  },
  selectAllText: {
    fontSize: 17
  },
  selectedTextContaier: {
    flexDirection: "row",
    marginLeft: 20,
    justifyContent: "center",
    alignItems: "center"
  },
  selected_num: {
    color: "#1B9341",
    fontSize: 16
  },
  importBtnContaier: {
    width: 100,
    height: 49,
    backgroundColor: "#1B9341",
    justifyContent: "center",
    alignItems: "center"
  },
  importBtnText: {
    color: "white",
    fontSize: 16
  }
});