import { jsxs, jsx } from "react/jsx-runtime";
import { L as LoadingButton } from "./loading-button-CCIxhJrY.js";
import { T as Tabs } from "./tabs-DgXFE6Gu.js";
import { B as Button } from "./button-CdJZJLGw.js";
import { C as Card } from "./card-B-gBwpxd.js";
import { C as Checkbox } from "./checkbox--3Zj5G-w.js";
import { L as Label } from "./label-0rIIfpX0.js";
import { R as RadioGroup, a as RadioGroupItem } from "./radio-group-Wf8uu9ZY.js";
import { S as Separator } from "./separator-CSqU-rrB.js";
import { b as TabsContent } from "./tabs-DmCK9qzK.js";
import { usePage, useForm } from "@inertiajs/react";
import { useState } from "react";
import { Renderer } from "richtor";
/* empty css                 */
import LessonControl from "./lesson-control-DQ33m0ZY.js";
import "./utils-DLCPGU0v.js";
import "clsx";
import "tailwind-merge";
import "lucide-react";
import "@radix-ui/react-slot";
import "class-variance-authority";
import "@radix-ui/react-checkbox";
import "@radix-ui/react-label";
import "@radix-ui/react-radio-group";
import "@radix-ui/react-separator";
import "@radix-ui/react-tabs";
const QuizViewer = ({ quiz }) => {
  var _a, _b, _c, _d, _e, _f;
  const { auth, translate } = usePage().props;
  const { frontend } = translate;
  const [finished, setFinished] = useState(false);
  const [currentTab, setCurrentTab] = useState("summary");
  const submissions = quiz.quiz_submissions;
  const { data, setData, post, reset, processing } = useForm({
    submission_id: submissions.length > 0 ? submissions[0].id : null,
    section_quiz_id: quiz.id,
    user_id: auth.user.id,
    answers: []
  });
  const handleSubmit = (e) => {
    e.preventDefault();
    post(route("quiz-submissions.store"), {
      onSuccess: () => {
        reset();
        setFinished(false);
        setCurrentTab("summary");
      }
    });
  };
  const handleCheckboxChange = (questionId, option, checked) => {
    if (checked) {
      const existingAnswer = data.answers.find((ans) => ans.question_id === questionId);
      if (existingAnswer) {
        setData(
          "answers",
          data.answers.map(
            (ans) => ans.question_id === questionId ? {
              ...ans,
              answer: [...ans.answer, option]
            } : ans
          )
        );
      } else {
        setData("answers", [
          ...data.answers,
          {
            question_id: questionId,
            answer: [option]
          }
        ]);
      }
    } else {
      setData(
        "answers",
        data.answers.map(
          (ans) => ans.question_id === questionId ? {
            ...ans,
            answer: ans.answer.filter((a) => a !== option)
          } : ans
        ).filter((ans) => ans.answer.length > 0)
      );
    }
  };
  const handleRadioChange = (questionId, value) => {
    const existingAnswerIndex = data.answers.findIndex((ans) => ans.question_id === questionId);
    if (existingAnswerIndex >= 0) {
      setData(
        "answers",
        data.answers.map((ans, index) => index === existingAnswerIndex ? { ...ans, answer: [value] } : ans)
      );
    } else {
      setData("answers", [
        ...data.answers,
        {
          question_id: questionId,
          answer: [value]
        }
      ]);
    }
  };
  const quizBack = (index) => {
    const previousQuestion = index - 1;
    if (previousQuestion < 0) {
      setCurrentTab("summary");
    } else {
      setCurrentTab(quiz.quiz_questions[previousQuestion].id.toString());
    }
    setFinished(false);
  };
  const quizNext = (index) => {
    const totalQuestions = quiz.quiz_questions.length;
    const currentQuestion = index + 1;
    if (currentQuestion === totalQuestions) {
      setFinished(true);
    } else {
      setCurrentTab(quiz.quiz_questions[currentQuestion].id.toString());
    }
  };
  const hasAnswerForCurrentQuestion = (questionId) => {
    return data.answers.some((ans) => ans.question_id === questionId && ans.answer.length > 0);
  };
  const startQuiz = () => {
    setData({
      submission_id: submissions.length > 0 ? submissions[0].id : null,
      section_quiz_id: quiz.id,
      user_id: auth.user.id,
      answers: []
    });
    setFinished(false);
    setCurrentTab(quiz.quiz_questions[0].id.toString());
  };
  return /* @__PURE__ */ jsxs(Card, { className: "group relative h-full max-h-[80vh] w-full overflow-hidden rounded-lg", children: [
    /* @__PURE__ */ jsx(LessonControl, { className: "opacity-0 transition-all duration-300 group-hover:opacity-100" }),
    /* @__PURE__ */ jsx("p", { className: "p-6 text-center text-lg font-bold", children: quiz.title }),
    /* @__PURE__ */ jsx(Separator, {}),
    /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxs(Tabs, { value: currentTab, onValueChange: setCurrentTab, className: "w-full p-6", children: [
      /* @__PURE__ */ jsxs(TabsContent, { value: "summary", children: [
        /* @__PURE__ */ jsxs("div", { className: "flex justify-between p-6", children: [
          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
            /* @__PURE__ */ jsx("p", { children: frontend.summery }),
            /* @__PURE__ */ jsxs("div", { className: "flex gap-2 text-sm", children: [
              /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: frontend.duration }),
              /* @__PURE__ */ jsxs("p", { children: [
                ":",
                ` ${quiz.hours} ${frontend.hours} ${quiz.minutes} ${frontend.minutes} ${quiz.seconds} ${frontend.seconds}`
              ] })
            ] }),
            /* @__PURE__ */ jsxs("div", { className: "flex gap-2 text-sm", children: [
              /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: frontend.total_questions }),
              /* @__PURE__ */ jsxs("p", { children: [
                ": ",
                quiz.quiz_questions.length
              ] })
            ] }),
            /* @__PURE__ */ jsxs("div", { className: "flex gap-2 text-sm", children: [
              /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: frontend.total_marks }),
              /* @__PURE__ */ jsxs("p", { children: [
                ": ",
                quiz.total_mark
              ] })
            ] }),
            /* @__PURE__ */ jsxs("div", { className: "flex gap-2 text-sm", children: [
              /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: frontend.pass_marks }),
              /* @__PURE__ */ jsxs("p", { children: [
                ": ",
                quiz.pass_mark
              ] })
            ] }),
            /* @__PURE__ */ jsxs("div", { className: "flex gap-2 text-sm", children: [
              /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: frontend.retake }),
              /* @__PURE__ */ jsxs("p", { children: [
                ": ",
                quiz.retake
              ] })
            ] })
          ] }),
          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
            /* @__PURE__ */ jsx("p", { children: frontend.result }),
            /* @__PURE__ */ jsxs("div", { className: "flex gap-2 text-sm", children: [
              /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: frontend.retake_attempts }),
              /* @__PURE__ */ jsxs("p", { children: [
                ": ",
                ((_a = submissions[0]) == null ? void 0 : _a.attempts) || 0
              ] })
            ] }),
            /* @__PURE__ */ jsxs("div", { className: "flex gap-2 text-sm", children: [
              /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: frontend.correct_answers }),
              /* @__PURE__ */ jsxs("p", { children: [
                ": ",
                ((_b = submissions[0]) == null ? void 0 : _b.correct_answers) || 0
              ] })
            ] }),
            /* @__PURE__ */ jsxs("div", { className: "flex gap-2 text-sm", children: [
              /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: frontend.incorrect_answers }),
              /* @__PURE__ */ jsxs("p", { children: [
                ": ",
                ((_c = submissions[0]) == null ? void 0 : _c.incorrect_answers) || 0
              ] })
            ] }),
            /* @__PURE__ */ jsxs("div", { className: "flex gap-2 text-sm", children: [
              /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: frontend.total_marks }),
              /* @__PURE__ */ jsxs("p", { children: [
                ": ",
                ((_d = submissions[0]) == null ? void 0 : _d.total_marks) || 0
              ] })
            ] }),
            /* @__PURE__ */ jsxs("div", { className: "flex gap-2 text-sm", children: [
              /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: "Status" }),
              /* @__PURE__ */ jsxs("p", { children: [
                ": ",
                ((_e = submissions[0]) == null ? void 0 : _e.is_passed) ? frontend.passed : frontend.not_passed
              ] })
            ] })
          ] })
        ] }),
        /* @__PURE__ */ jsx("div", { className: "flex justify-center p-6", children: ((_f = submissions[0]) == null ? void 0 : _f.attempts) >= quiz.retake ? /* @__PURE__ */ jsx(Button, { type: "button", size: "lg", children: frontend.quiz_submitted }) : /* @__PURE__ */ jsx(Button, { size: "lg", type: "button", onClick: startQuiz, children: submissions[0] ? frontend.retake_quiz : frontend.start_quiz }) })
      ] }),
      quiz.quiz_questions.map((question, index) => {
        var _a2;
        const options = (question == null ? void 0 : question.options) ? typeof question.options === "string" ? JSON.parse(question.options) : question.options : [];
        return /* @__PURE__ */ jsxs(TabsContent, { value: question.id.toString(), className: "space-y-6", children: [
          /* @__PURE__ */ jsx(Renderer, { value: question.title }),
          question.type === "boolean" ? /* @__PURE__ */ jsxs(
            RadioGroup,
            {
              className: "space-y-2",
              defaultValue: ((_a2 = data.answers.find((ans) => ans.question_id === question.id.toString())) == null ? void 0 : _a2.answer[0]) || void 0,
              onValueChange: (value) => handleRadioChange(question.id.toString(), value),
              children: [
                /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
                  /* @__PURE__ */ jsx(RadioGroupItem, { className: "cursor-pointer", id: "True", value: "True" }),
                  /* @__PURE__ */ jsx(Label, { htmlFor: "True", className: "capitalize", children: frontend.true })
                ] }),
                /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
                  /* @__PURE__ */ jsx(RadioGroupItem, { className: "cursor-pointer", id: "False", value: "False" }),
                  /* @__PURE__ */ jsx(Label, { htmlFor: "False", className: "capitalize", children: frontend.false })
                ] })
              ]
            }
          ) : /* @__PURE__ */ jsx("div", { className: "space-y-4", children: options.map((option) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ jsx(
              Checkbox,
              {
                id: option,
                checked: data.answers.some((ans) => ans.question_id === question.id.toString() && ans.answer.includes(option)),
                onCheckedChange: (checked) => handleCheckboxChange(question.id.toString(), option, checked)
              }
            ),
            /* @__PURE__ */ jsx(Label, { htmlFor: option, className: "capitalize", children: option })
          ] }, option)) }),
          /* @__PURE__ */ jsxs("div", { className: "flex justify-center gap-2 p-6", children: [
            /* @__PURE__ */ jsx(Button, { type: "button", onClick: () => quizBack(index), children: "Back" }),
            finished ? /* @__PURE__ */ jsx(LoadingButton, { loading: processing, children: "Finish" }) : /* @__PURE__ */ jsx(Button, { type: "button", onClick: () => quizNext(index), disabled: !hasAnswerForCurrentQuestion(question.id.toString()), children: "Next" })
          ] })
        ] });
      })
    ] }) })
  ] });
};
export {
  QuizViewer as default
};