import React from "react";
import "./QuestionDetail.css";
import { authenticationService } from '../../../../_services';
import { Layout, Avatar, Button, Radio, Switch, Tabs, Card, Collapse, Statistic, Col, Row } from 'antd';
import 'katex/dist/katex.min.css';
import Latex from 'react-latex-next';

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 style={{ background: "#fff", padding: '24px', borderRadius: '8px' }}>
        {/* Question Number and Text */}
        <Row className="question-header" style={{
          marginBottom: '32px',
          borderBottom: '1px solid #e0e0e0',
          paddingBottom: '20px'
        }}>
          <Col>
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: '12px' }}>
              <div style={{
                minWidth: '32px',
                height: '32px',
                borderRadius: '50%',
                background: '#bfbfbf',
                color: 'white',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: '16px',
                fontWeight: '500',
                marginTop: '4px'
              }}>
                {question.index}
              </div>
              <div className="question-text" style={{ flex: 1 }}>
{/* <ReactMarkdown
  remarkPlugins={[remarkMath]}
  rehypePlugins={[rehypeKatex]}
>
  {`
This is inline math: $E = mc^2$

And this is a block:

$$
x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}
$$
`}
</ReactMarkdown> */}
    <Latex>{question.question_text}</Latex>

              </div>
            </div>
          </Col>
        </Row>

        {/* Options */}
        <Row className="question-options" style={{ marginBottom: '32px' }}>
          <Col span={24}>
            <Radio.Group
              onChange={this.onAnswerChange}
              value={answer}
              className="radio-group"
              style={{
                display: 'flex',
                flexDirection: 'column',
                gap: '16px'
              }}
            >
              {answerOptions}
            </Radio.Group>
          </Col>
        </Row>

        {/* Review Switch and Actions */}
        <Row style={{
          borderTop: '1px solid #e0e0e0',
          background: '#fff',
          paddingTop: '20px',
          marginTop: 'auto',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center'
        }}>
          <Col>
            <Switch
              checkedChildren="Review On"
              unCheckedChildren="Review Off"
              checked={question.isReviewMarked}
              onChange={this.onReviewQuestion}
              style={{ width: '100px' }}
            />
          </Col>
          <Col>
            <div className="action-buttons" style={{ display: 'flex', gap: '12px' }}>
              <Button
                onClick={this.onClearResponse}
                style={{ borderRadius: '6px' }}
              >
                Clear Response
              </Button>
              <Button
                onClick={this.loadNextQuestion}
                type="primary"
                disabled={question.index >= totalQuestion}
                style={{ borderRadius: '6px' }}
              >
                Next Question
              </Button>
            </div>
          </Col>
        </Row>
      </Layout>
    );
  }
};

export default QuestionDetail;
