import React, { Component } from 'react';
import {
  Dimensions,
  Image,
  StyleSheet,
  Text,
  TouchableOpacity,
  TouchableWithoutFeedback,
  View,
} from 'react-native';

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.rDetail}>hhggdsdfghkjkhggv</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,
    };
  }

  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;
            }
            this.setState({
              ...tmp,
            });
          }}
          number={this.state.currentNumber}
        /> :
        <Result score={this.state.score} 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',
  },
  rDetail: {
    fontSize: 15,
    color: '#242424'
  },
  rResetBtn: {
    justifyContent: 'center',
    alignItems: 'center',
    marginVertical: 25,
    backgroundColor: '#1b9341',
    height: 45,
    borderRadius: 5,
  },
  rResetText: {
    fontSize: 16,
    color: 'white',
  },
});

export default HealthQuestionnaire;