// QuestionForm.tsx
import React, { useState } from "react";

interface Answer {
  text: string;
  correct: boolean;
}

interface Question {
  question: string;
  answers: Answer[];
}

interface QuestionFormProps {
  onSave: (question: Question) => void;
}

const QuestionForm: React.FC<QuestionFormProps> = ({ onSave }) => {
  const [question, setQuestion] = useState("");
  const [answers, setAnswers] = useState([{ text: "", correct: false }]);

  const addAnswer = () => {
    setAnswers([...answers, { text: "", correct: false }]);
  };

  const removeAnswer = (indexToRemove: number) => {
    setAnswers(answers.filter((_, index) => index !== indexToRemove));
  };

  const handleAnswerChange = (index: number, value: string) => {
    const updatedAnswers = [...answers];
    updatedAnswers[index].text = value;
    setAnswers(updatedAnswers);
  };

  const handleCorrectChange = (index: number) => {
    const updatedAnswers = [...answers];
    updatedAnswers.forEach((answer, i) => {
      if (i === index) {
        answer.correct = true;
      } else {
        answer.correct = false;
      }
    });
    setAnswers(updatedAnswers);
  };

  const handleSave = () => {
    onSave({ question, answers });
    setQuestion("");
    setAnswers([{ text: "", correct: false }]);
  };

  return (
    <div className="form-group">
      <table className="table">
        <thead>
          <tr>
            <td colSpan={3}>
              <input
                type="text"
                value={question}
                onChange={(e) => setQuestion(e.target.value)}
                placeholder="Enter your question"
              />
            </td>
          </tr>
        </thead>
        <tbody>
          {answers.map((answer, index) => (
            <tr className="" key={index}>
              <td>
                <input
                  type="text"
                  value={answer.text}
                  onChange={(e) => handleAnswerChange(index, e.target.value)}
                  placeholder="Enter answer"
                />
              </td>
              <td>
                <div className="d-flex gap-1 align-items-center">
                  <input
                    type="radio"
                    id={`correct-${index}`}
                    checked={answer.correct}
                    onChange={() => handleCorrectChange(index)}
                  />
                  <label htmlFor={`correct-${index}`}>Correct</label>
                </div>
              </td>
              <td>
                <div className="d-flex justify-content-end w-100 gap-2 align-items-center">
                  {index > 0 && (
                    <button
                      className="answer_buttons"
                      onClick={() => removeAnswer(index)}
                    >
                      -
                    </button>
                  )}
                  {index === answers.length - 1 && ( // Conditionally render plus button
                    <button className="answer_buttons" onClick={addAnswer}>
                      +
                    </button>
                  )}
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <button onClick={handleSave} className="hc_button_when_bg_white">
        Save and Continue
      </button>
    </div>
  );
};

export default QuestionForm;