import React, { Component } from "react";
import {
  Dimensions,
  Image,
  StyleSheet,
  Text,
  TouchableOpacity,
  TouchableWithoutFeedback,
  View
} from "react-native";
import post from "../../utils/fetch";

const questions = [
  { question: "早上起床时，有持续的发丝掉落。", score: 5 },
  { question: "情绪抑郁，会对着天空发呆。", score: 3 },
  { question: "记不起昨天想好的事，而且最近经常有这种现象出现。", score: 10 },
  { question: "上班途中，害怕走进办公室，觉得工作令人厌倦。", score: 5 },
  { question: "不想面对同事和上司，有一种自闭倾向。", score: 5 },
  { question: "工作效率明显下降，上司已表达了对你的不满。", score: 5 },
  { question: "每天工作一小时，就感身体倦怠，胸闷气短。", score: 10 },
  { question: "工作情绪始终无法高涨，最令自己不解的是无名的火气很大，但又没有精力发作。", score: 5 },
  { question: "每天进餐少，即使口味非常适合自己的菜肴，也食不知味。", score: 5 },
  { question: "盼望早点逃离办公室，能够回家躺在床上多休息。", score: 5 },
  { question: "对城市的污染、噪声非常敏感，比常人渴望清幽，希望到宁静的山水处，使身心得以休息。", score: 5 },
  { question: "不再像以前一样热衷于朋友的聚会，有一种强打起精神勉强应酬的感觉。", score: 2 },
  { question: "晚上经常睡不着觉，即使睡着了，又老是在做梦状态，睡眠状态很糟。", score: 10 },
  { question: "体重明显下降，早上起来，发现眼眶深陷，下巴突出。", score: 10 },
  { question: "感觉免疫力下降，容易伤风感冒。", score: 5 },
  { question: "性能力下降。昨天配偶对你明显表示有性要求，你却感到疲惫不堪，毫无性欲，令配偶怀疑你有外遇。", score: 10 }
];

class Start extends Component {
  render() {
    return (
      <View
        style={[
          styles.container,
          { backgroundColor: "white", alignItems: "center" }
        ]}
      >
        <Image
          style={styles.startImage}
          source={require("../../assets/home/questionnaire.png")}
          resizeMode="contain"
        />
        <TouchableOpacity
          style={styles.startBtn}
          onPress={() => this.props.onStart()}
        >
          <Text style={styles.startBtnText}>开始测试</Text>
        </TouchableOpacity>
        <Text style={styles.startComment}>已有276人</Text>
      </View>
    );
  }
}

class Question extends Component {
  constructor(props) {
    super(props);
    this.state = {
      answer: null
    };
  }

  render() {
    const { number, pressHandler } = this.props;
    return (
      <View style={styles.container}>
        <View style={styles.qPromptContainer}>
          <Text style={styles.qPromptText}>请根据您的真实情况选择</Text>
          <Text style={styles.qPromptText}>
            {number + 1}/{questions.length}
          </Text>
        </View>
        <View style={styles.qQuestionContainer}>
          <Text style={styles.qQuestion}>
            {number + 1}. {questions[number].question}
          </Text>
        </View>
        <View style={styles.qOptionContainer}>
          <TouchableOpacity
            style={styles.qOption}
            onPress={() => {
              pressHandler(questions[number].score);
            }}
          >
            <Text style={styles.qOptionText}>符合</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.qOption}
            onPress={() => {
              pressHandler(0);
            }}
          >
            <Text style={styles.qOptionText}>不符合</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

class Result extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.rContainer}>
          <Text style={styles.rTitle}>检测结果</Text>
          <Text style={styles.minTitle}>分析结果：</Text>
          <Text style={styles.rDetail}>{this.props.resultText}</Text>
          <Text style={styles.minTitle}>可能原因：</Text>
          <Text style={styles.rDetail}>{this.props.reason}</Text>
          <Text style={styles.minTitle}>健康建议：</Text>
          <Text style={styles.rDetail}>{this.props.advice}</Text>
        </View>
        <TouchableOpacity
          style={styles.rResetBtn}
          onPress={() => {
            this.props.onReset();
          }}
        >
          <Text style={styles.rResetText}>重新检测</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

class HealthQuestionnaire extends Component {
  constructor(props) {
    super(props);
    this.state = {
      stage: 0,
      score: 0,
      currentNumber: 0,
      resultText:"",
      reason:"",
      advice:""
    };
  }

  render() {
    const { stage } = this.state;
    return stage == 0 ? (
      <Start
        onStart={() => {
          this.setState({ stage: 1 });
        }}
      />
    ) : stage == 1 ? (
      <Question
        pressHandler={score => {
          const old = this.state;
          let tmp = {
            score: old.score + score,
            currentNumber: old.currentNumber + 1
          };
          if (old.currentNumber == questions.length - 1) {
            tmp.stage = old.stage + 1;
            post(
              `/test/insurance/questionnaire`,
              {
                score: tmp.score
              },
              res => {
                this.setState({
                  resultText: res.data.result,
                  reason:res.data.reason,
                  advice:res.data.advice,
                })
                
              },
              err => {
                console.log(err);
              }
            );
          }
          this.setState({
            ...tmp
          });
        }}
        number={this.state.currentNumber}
      />
    ) : (
      <Result
        score={this.state.score}
        resultText={this.state.resultText}
        reason={this.state.reason}
        advice={this.state.advice}
        onReset={() => {
          this.setState({ score: 0, stage: 0, currentNumber: 0 });
        }}

      />
    );
  }
}

const { width } = Dimensions.get("window");

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "stretch",
    paddingHorizontal: 12
  },
  startImage: {
    width: width - 140,
    height: (width - 140) / 454 * 208,
    marginVertical: 100
  },
  startBtn: {
    width: width - 80,
    height: 45,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#1b9341",
    borderRadius: 5
  },
  startBtnText: {
    fontSize: 16,
    color: "white"
  },
  startComment: {
    marginTop: 8,
    fontSize: 13,
    color: "#727272"
  },
  qPromptContainer: {
    height: 36,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center"
  },
  qPromptText: {
    fontSize: 13,
    color: "#7a7a7a"
  },
  qQuestionContainer: {
    padding: 12,
    flex: 1,
    backgroundColor: "white",
    borderRadius: 5
  },
  qQuestion: {
    fontSize: 15,
    color: "#242424"
  },
  qOptionContainer: {
    marginVertical: 14,
    flexDirection: "row",
    justifyContent: "space-between",
    borderTopWidth: 0.5,
    borderColor: "#e6e6e6"
  },
  qOption: {
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 5,
    backgroundColor: "#1b9341",
    height: 44,
    width: (width - 28 - 14) / 2
  },
  qOptionText: {
    fontSize: 15,
    color: "white"
  },
  rContainer: {
    flex: 1,
    borderRadius: 5,
    backgroundColor: "white",
    marginTop: 15,
    paddingHorizontal: 24,
    paddingBottom: 38
  },
  rTitle: {
    marginVertical: 37,
    alignSelf: "center",
    fontSize: 20,
    fontWeight: "bold"
  },
  minTitle: {
    marginVertical: 15,
    alignSelf: "flex-start",
    fontSize: 16,
    fontWeight: "bold"
  },
  rDetail: {
    fontSize: 15,
    color: "#242424",
    marginBottom: 10,
  },
  rResetBtn: {
    justifyContent: "center",
    alignItems: "center",
    marginVertical: 25,
    backgroundColor: "#1b9341",
    height: 45,
    borderRadius: 5
  },
  rResetText: {
    fontSize: 16,
    color: "white"
  }
});

export default HealthQuestionnaire;