freezmo/components/activities/MultipleChoice.tsx

"use client";

import { useEffect, useState } from "react";

import { useI18n } from "@/lib/i18n";
import type { Activity } from "@/lib/schemas";

import {
  ActivityHeader,
  FeedbackPanel,
  Hint,
  OptionTile,
  PromptCard,
  QuestionText,
  type ActivityComponentProps,
} from "./shared";

type MultipleChoiceActivity = Extract<Activity, { type: "multiple_choice" }>;

export function MultipleChoice({
  activity,
  active,
  onAnswered,
  onNext,
  isLast,
}: ActivityComponentProps<MultipleChoiceActivity>) {
  const { t } = useI18n();
  const [selected, setSelected] = useState<number | null>(null);
  const answered = selected !== null;

  const choose = (index: number) => {
    if (answered) return;
    setSelected(index);
    onAnswered(index === activity.correctIndex);
  };

  useEffect(() => {
    if (!active || answered) return;
    const onKey = (event: KeyboardEvent) => {
      const target = event.target as HTMLElement | null;
      if (target && /^(INPUT|TEXTAREA)$/.test(target.tagName)) return;
      const index = Number.parseInt(event.key, 10) - 1;
      if (index >= 0 && index < activity.options.length) {
        event.preventDefault();
        choose(index);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [active, answered, activity.options.length]);

  const stateFor = (index: number): "idle" | "correct" | "wrong" | "dim" => {
    if (!answered) return "idle";
    if (index === activity.correctIndex) return "correct";
    if (index === selected) return "wrong";
    return "dim";
  };

  return (
    <>
      <ActivityHeader type="multiple_choice" topic={activity.topic} />
      <PromptCard>
        <QuestionText>{activity.question}</QuestionText>
      </PromptCard>

      <div className="flex flex-col gap-2.5" role="group" aria-label={t("activity.answerOptions")}>
        {activity.options.map((option, index) => (
          <OptionTile
            key={option + index}
            state={stateFor(index)}
            disabled={answered}
            onClick={() => choose(index)}
            shortcut={String(index + 1)}
          >
            {option}
          </OptionTile>
        ))}
      </div>

      {!answered ? <Hint>{t("mc.tipKeys")}</Hint> : null}

      {answered ? (
        <FeedbackPanel
          correct={selected === activity.correctIndex}
          explanation={activity.explanation}
          xp={activity.xp}
          isLast={isLast}
          onNext={onNext}
          detail={
            selected === activity.correctIndex ? null : (
              <>
                {t("activity.correctAnswer")}{" "}
                <span className="font-bold">{activity.options[activity.correctIndex]}</span>
              </>
            )
          }
        />
      ) : null}
    </>
  );
}