import React from "react";
import "./AttemptExam.css";
import { authenticationService } from '../../../../_services';
import { selectorService } from "../../../../services/selectorService";
import { Layout, Avatar, Button, Radio, Switch, Tabs, Card, Collapse, Statistic, Col, Row } from 'antd';
import { Link } from 'react-router-dom';
import parse from "html-react-parser";
import { ButtonGroup } from "react-bootstrap";

class QuestionDetail extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      currentUser: authenticationService.currentUserValue,
      exam_id: 'props.location.state.examId',
      question: this.props.question
    };
    this.loadNextQuestion = this.loadNextQuestion.bind(this);
    this.onReviewQuestion = this.onReviewQuestion.bind(this);
    this.onClearResponse = this.onClearResponse.bind(this);
  }

  sendData = (question) => {
    this.props.parentCallback(question);
  }

  loadNextQuestion = () => {
    this.props.parentCallbackNext(this.props.question);
  };


  onReviewQuestion = (val) => {
    this.state.question.isReviewMarked = val;
    this.sendData(this.state.question);
  }

  onAnswerChange = (event) => {
    let questionType = this.state.question.type_code;
    let id = event.target.value;
    let tempQuestion = this.state.question;
    if (questionType === 'MCQ' || questionType === 'TNF') {
      let options = this.state.question.options.map((option, index) => {
        if (option.id === id)
          option.isSelected = event.target.checked;
        else
          option.isSelected = false;
        return option;
      })
      tempQuestion.options = options;
    }

    this.setState({
      question: tempQuestion
    })

    this.sendData(this.state.question);
  }

  onClearResponse = () => {
    let options = this.state.question.options.map((option, index) => {
      option.isSelected = false;
      return option;
    })
    let tempQuestion = this.state.question;
    tempQuestion.options = options;
    this.setState({
      question: tempQuestion
    })
    this.sendData(this.state.question);
  }

  render() {
    const { question, totalQuestion } = this.props;
    this.state.question = question;

    let answer = "";
    const answerOptions = question.options.map((option) => {
      if (option.isSelected) answer = option.id;
      return (
        <Radio className="radioStyle" key={option.id} value={option.id}>
          {option.text}
        </Radio>
      );
    });

    return (
      <Layout className="MainExamQuestionLayout" style={{ background: "#fff" }}>
        <Row className="question-header">
          <Col>
            <h3 className="question-title">
              {question.index}. {parse(question.question_text)}
            </h3>
          </Col>
        </Row>

        <Row className="question-options">
          <Col>
            <Radio.Group
              onChange={this.onAnswerChange}
              value={answer}
              className="radio-group"
            >
              {answerOptions}
            </Radio.Group>
          </Col>
        </Row>

        <Row className="review-switch">
          <Col>
            <Switch
              checkedChildren="Review On"
              unCheckedChildren="Review Off"
              checked={question.isReviewMarked}
              onChange={this.onReviewQuestion}
            />
          </Col>
        </Row>

        <Row className="question-actions">
          <Col>
            <div className="action-buttons">
              <Button
                onClick={this.loadNextQuestion}
                type="primary"
                disabled={question.index >= totalQuestion}
                className="rounded-btn"
              >
                Next Question
              </Button>
              <Button
                onClick={this.onClearResponse}
                className="rounded-btn"
              >
                Clear Response
              </Button>
            </div>
          </Col>
        </Row>
      </Layout>
    );
  }
};

export default QuestionDetail;
