import {
  ReviewQuestionContentHeader
} from "./chunk-Y5N3J7VF.js";
import {
  RadioButtonCard
} from "./chunk-SLXXCM56.js";
import {
  Grid
} from "./chunk-EGEQY3KT.js";
import {
  Card
} from "./chunk-HEDMSFPW.js";
import {
  Box
} from "./chunk-4Y5BEXVN.js";
import {
  Typo
} from "./chunk-PARGQUJB.js";
import {
  Flex
} from "./chunk-25HMMI7R.js";
import {
  Button
} from "./chunk-AFPH32MF.js";

// src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-radio.tsx
import { useCallback, useMemo, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var correctAnswerStyle = {
  backgroundColor: "var(--green-a2)"
};
function ReviewQuestionRadio(props) {
  const { question, answer, onChange } = props;
  const [isCheckAnswer, setIsCheckAnswer] = useState(false);
  const checkAnswer = useCallback(() => {
    setIsCheckAnswer(true);
  }, []);
  const isCorrect = isCheckAnswer && Number(answer) === question.correctAnswer;
  const isWrong = isCheckAnswer && Number(answer) !== question.correctAnswer;
  const radioColor = useMemo(() => {
    if (isCorrect) return "green";
    if (isWrong) return "red";
    return void 0;
  }, [isCorrect, isWrong]);
  return /* @__PURE__ */ jsxs(Grid, { height: "100%", rows: "auto 1fr", width: "100%", children: [
    /* @__PURE__ */ jsx(Card, { mb: "4", size: "2", children: /* @__PURE__ */ jsx(
      ReviewQuestionContentHeader,
      {
        icon: question.icon,
        question: question.question,
        title: question.title,
        type: question.type
      }
    ) }),
    /* @__PURE__ */ jsxs(Grid, { height: "100%", rows: "1fr auto", width: "100%", children: [
      /* @__PURE__ */ jsx(Box, { position: "relative", children: /* @__PURE__ */ jsx(
        RadioButtonCard.Root,
        {
          color: radioColor,
          onValueChange: onChange,
          style: {
            width: "100%",
            height: "100%",
            overflowY: "auto",
            position: "absolute"
          },
          value: answer,
          children: /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "2", width: "100%", children: question.options.map((option, i) => {
            const isThisOptionCorrect = isCheckAnswer && i === question.correctAnswer;
            const isThisOptionSelected = isCheckAnswer && i === Number(answer);
            const isThisOptionWrong = isCheckAnswer && isThisOptionSelected && i !== question.correctAnswer;
            const style = (() => {
              if (isThisOptionCorrect) return correctAnswerStyle;
              return {};
            })();
            return /* @__PURE__ */ jsx(
              RadioButtonCard.Item,
              {
                style,
                value: i.toString(),
                children: /* @__PURE__ */ jsxs(Box, { children: [
                  /* @__PURE__ */ jsx(Typo, { as: "p", children: option.label }),
                  isThisOptionCorrect ? /* @__PURE__ */ jsx(Typo, { color: "green", children: "\uC815\uB2F5\uC785\uB2C8\uB2E4" }) : null,
                  isThisOptionWrong ? /* @__PURE__ */ jsx(Typo, { color: "red", children: "\uC815\uB2F5\uC774 \uC544\uB2D9\uB2C8\uB2E4" }) : null
                ] })
              },
              `${option.label}-${i}`
            );
          }) })
        }
      ) }),
      /* @__PURE__ */ jsx(Flex, { justify: "end", mt: "2", children: /* @__PURE__ */ jsx(Button, { onClick: checkAnswer, children: "\uC815\uB2F5 \uD655\uC778" }) })
    ] })
  ] });
}
var review_question_radio_default = ReviewQuestionRadio;

export {
  review_question_radio_default
};
//# sourceMappingURL=chunk-T3VV2X45.js.map