import React, { Component } from "react";
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  ScrollView,
  ListView,
  Dimensions,
  DatePickerIOS,
  AsyncStorage,
  Alert
} 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 = {
      IS_LOGIN: "",
      USER_ID: "",
      QuesList: [
        {
          title: "1.我该称呼您先生还是女士呢？",
          type: "select",
          answers: ["先生", "女士"],
          selected: 0
        },
        {
          title: "2.请问您是否有家庭负债？",
          type: "select",
          answers: ["有贷款", "无贷款"],
          selected: 0
        },
        {
          title: "3.您要为哪些家人投保呢？",
          type: "select",
          answers: ["先生", "妻子", "儿子", "女儿", "母亲", "父亲"],
          selected: 0
        },
        {
          title: "4.选择出生日期",
          type: "date",
          answers: ["请选择"],
          selected: 0
        },
        {
          title: "5.请问被保人的年收入是多少？",
          type: "select",
          answers: ["2万以下", "2万~10万", "10万以上"],
          selected: 0
        },
        {
          title: "6.被保人是否有社保？",
          type: "select",
          answers: ["有", "无"],
          selected: 0
        }
      ],
      answerList: [],
      date: new Date()
    };
  }
  componentWillMount() {
    this.getAsyncStorage();
  }

  componentDidMount() {}

  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] : ""
      });
    });
  }

  _renderQuestion() {
    return this.state.QuesList.map((item, index) => {
      return (
        <View style={styles.itemQuesContainer} key={index}>
          <View style={styles.titleContaier}>
            <Text style={styles.title}>{item.title}</Text>
          </View>
          <View style={styles.answerContainer}>
            {item.type == "select" ? (
              item.answers.map((x, index2) => {
                return (
                  <TouchableOpacity
                    key={index2}
                    style={[
                      styles.answerWrapper,
                      {
                        backgroundColor:
                          item.selected == index2 ? "#1B9341" : "white"
                      }
                    ]}
                    onPress={() => {
                      if (item.type == "select") {
                        this.setState({
                          QuesList: [
                            ...this.state.QuesList.slice(0, index),
                            {
                              ...this.state.QuesList[index],
                              selected: index2
                            },
                            ...this.state.QuesList.slice(index + 1)
                          ]
                        });
                      }
                    }}
                  >
                    <Text
                      style={[
                        styles.answer,
                        { color: item.selected == index2 ? "white" : "#242424" }
                      ]}
                    >
                      {x}
                    </Text>
                  </TouchableOpacity>
                );
              })
            ) : (
              <View style={styles.dateWrapper}>
                <DatePickerIOS
                  style={styles.dateWrapper}
                  date={this.state.date}
                  onDateChange={date => this.setState({ date })}
                  mode="date"
                />
              </View>
            )}
          </View>
        </View>
      );
    });
  }

  submit() {
    const that = this,
      { answerList, USER_ID } = this.state,
      { navigate } = this.props.navigation;
    let Temp = this.state.QuesList.map(item => item.answers[item.selected]);
    Temp.splice(3, 1, that.format(that.state.date));
    let Result = {
      age: 2017 - parseInt(Temp[3].split("-")[0]),
      security: Temp[5],
      income: Temp[4],
      debt: Temp[2]
    };
    console.log("temp Result", Temp, Result);
    if (this.state.IS_LOGIN != "yes") {
      Alert.alert("请先登录账号");
    } else {
      post(
        `/test/insurance/advice`,
        {
          userid: this.state.USER_ID,
          result: Result
        },
        res => {
          navigate("AISolution");
        },
        err => {}
      );
    }
  }

  format(date) {
    const Year = date.getFullYear();
    const Month = date.getMonth();
    const Day = date.getDate();
    return `${Year}-${Month}-${Day}`;
  }

  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <ScrollView>
          {this._renderQuestion()}
          <TouchableOpacity
            onPress={() => {
              this.submit();
            }}
            style={styles.confirmBtn}
          >
            <Text style={styles.confirmBtnText}>生成智能方案</Text>
          </TouchableOpacity>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "stretch",
    backgroundColor: "#F0F0F0",
    paddingHorizontal: 12,
    paddingTop: 12
  },
  itemQuesContainer: {
    backgroundColor: "white",
    marginBottom: 12,
    borderRadius: 4
  },
  titleContaier: {
    paddingHorizontal: 14,
    paddingVertical: 17
  },
  answerContainer: {
    borderStyle: "solid",
    borderColor: "#E6E6E6",
    borderTopWidth: 1,
    paddingHorizontal: 14,
    paddingBottom: 17,
    flexDirection: "row",
    flexWrap: "wrap"
  },
  answerWrapper: {
    marginRight: 18,
    marginTop: 17,
    paddingHorizontal: 20,
    paddingVertical: 4,
    height: 30,
    borderStyle: "solid",
    borderColor: "#E6E6E6",
    borderWidth: 1,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 3
  },
  answer: {
    fontSize: 15
    // color: "#242424",
  },
  confirmBtn: {
    marginVertical: 20,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#1B9341",
    height: 45,
    borderRadius: 5
  },
  confirmBtnText: {
    fontSize: 16,
    color: "white"
  },
  dateWrapper: {
    width: 300
  }
});