const { useEffect, useMemo, useState } = React;

const MatchQuestion = ({ question, onAnswer }) => {
  const shuffledRight = useMemo(
    () => window.shuffle(question.pairs.map((pair) => pair.right)),
    [question]
  );
  const [selections, setSelections] = useState({});
  const [locked, setLocked] = useState(false);

  useEffect(() => {
    setSelections({});
    setLocked(false);
  }, [question.id]);

  const allSelected =
    Object.keys(selections).length === question.pairs.length &&
    question.pairs.every((pair) => selections[pair.left]);

  const handleChange = (left, value) => {
    if (locked) return;
    setSelections((prev) => ({ ...prev, [left]: value }));
  };

  const handleSubmit = () => {
    if (locked) return;
    const correct = question.pairs.every(
      (pair) => selections[pair.left] === pair.right
    );
    setLocked(true);
    onAnswer(correct);
  };

  return (
    <div>
      <h3>{question.prompt}</h3>
      <div className="match-grid">
        {question.pairs.map((pair) => (
          <div
            key={pair.left}
            className={`match-row ${
              locked
                ? selections[pair.left] === pair.right
                  ? "correct"
                  : "wrong"
                : ""
            }`}
          >
            <strong>{pair.left}</strong>
            <select
              value={selections[pair.left] || ""}
              onChange={(event) => handleChange(pair.left, event.target.value)}
              disabled={locked}
            >
              <option value="" disabled>
                Choose meaning
              </option>
              {shuffledRight.map((right) => (
                <option key={right} value={right}>
                  {right}
                </option>
              ))}
            </select>
          </div>
        ))}
      </div>
      <div className="footer-actions">
        <button className="btn" onClick={handleSubmit} disabled={!allSelected || locked}>
          Check match
        </button>
      </div>
    </div>
  );
};