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

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      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() {}

  componentDidMount() {}

  getListData() {
    let that = this;
    return fetch(`https://devpay.brae.co/test/insurance/topic`, {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      }
    })
      .then(resp => {
        if (resp.status === 200) {
          return resp.json();
        } else {
          console.error("something went wrong!");
        }
      })
      .then(respJson => {
        if (respJson.enmsg != "ok") {
          alert(respJson.cnmsg);
        } else {
          that.setState({
            ListData: respJson.data.topic
          });
          console.log("首页列表", this.state.ListData);
        }
      });
  }

  _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;
    let Temp = this.state.QuesList.map(item => item.answers[item.selected]);
    console.log(Temp)
    Temp.splice(3,1,that.format(that.state.date));
    that.setState({
      answerList: Temp
    })
  }

  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: 0.5,
    paddingHorizontal: 14,
    paddingBottom: 17,
    flexDirection: "row",
    flexWrap: "wrap"
  },
  answerWrapper: {
    marginRight: 18,
    marginTop: 17,
    paddingHorizontal: 20,
    paddingVertical: 4,
    height: 30,
    borderStyle: "solid",
    borderColor: "#E6E6E6",
    borderWidth: 0.5,
    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
  }
});