import React from 'react';
import MediaViewer from './MediaViewer';
import { MEDIA_URL } from '../../../../../utils/Constant';

const TrueFalseQuestion = ({ question, studentAnswer, index }) => {
  const savedAnswer = studentAnswer !== null ? studentAnswer : null;
  const mediaUrls = [];
  const mediaPath = `${MEDIA_URL}/exercise`;

  if (question.IMAGE) mediaUrls.push(`${mediaPath}/image/${question.IMAGE}`);
  if (question.AUDIO) mediaUrls.push(`${mediaPath}/audio/${question.AUDIO}`);
  if (question.VIDEO) mediaUrls.push(question.VIDEO);

  return (
    <div>

      <div className={`correction-label ${question.IS_CORRECT === 1 ? `correct`  : `incorrect` }`}>
        <i className={`me-2 bi ${question.IS_CORRECT === 1 ? `bi-check-circle-fill`  : `bi-x-circle-fill` }`}></i>
        Your answer is {question.IS_CORRECT === 1 ? `correct`  : `incorrect` }.
      </div>

      {mediaUrls.length > 0 && <MediaViewer mediaUrls={mediaUrls} />}

      <p>{question.QUESTION.split('\n').map((line, index) => (
          <React.Fragment key={index}>
              {line}
              <br />
          </React.Fragment>
      ))}</p>
      
      <div className="options-tf">

        <div 
          className={`p-0 mb-3 form-check ${savedAnswer === '1' ? 'selected-answer' : ''}`}
          style={{ display: 'flex', alignItems: 'center'}}
        >
          <span className="option-label">A</span>
          <span className="ms-2 option-text">TRUE</span>
        </div>

        <div 
          className={`p-0 mb-3 form-check ${savedAnswer === '0' ? 'selected-answer' : ''}`}
          style={{ display: 'flex', alignItems: 'center'}}
        >
          <span className="option-label">B</span>
          <span className="ms-2 option-text">FALSE</span>
        </div>

      </div>
    </div>
  );
};

export default TrueFalseQuestion;
