import ExamCard7 from '@/components/cards/exam-card-7';
import Tabs from '@/components/tabs';
import { Card } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import { TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { StudentExamProps } from '@/types/page';
import { Head, Link } from '@inertiajs/react';
import { ReactNode } from 'react';
import Layout from '../partials/layout';
import ExamAttempts from '../tabs-content/exam-attempts';
import ExamCertificate from '../tabs-content/exam-certificate';
import ExamResources from '../tabs-content/exam-resources';
import ExamResult from '../tabs-content/exam-result';

const Exam = (props: StudentExamProps) => {
   const { tab, exam, attempt, attempts, bestAttempt } = props;

   const tabs = [
      // {
      //    value: 'modules',
      //    label: 'Modules',
      // },
      // {
      //    value: 'questions',
      //    label: 'Questions',
      // },
      {
         value: 'attempts',
         label: 'Attempts',
      },
      {
         value: 'resources',
         label: 'Resources',
      },
      {
         value: 'certificate',
         label: 'Certificate',
      },
   ];

   const renderContent = () => {
      switch (tab) {
         // case 'modules':
         //    return <ExamModules />;
         // case 'questions':
         //    return <ExamQuestions />;
         case 'attempts':
            return attempt ? <ExamResult /> : <ExamAttempts />;
         case 'resources':
            return <ExamResources />;
         case 'certificate':
            return <ExamCertificate />;
         default:
            return <></>;
      }
   };

   return (
      <>
         <Head title={exam.title} />

         <ExamCard7 exam={exam} attempts={attempts || []} bestAttempt={bestAttempt} />

         <Card className="mt-6">
            <Tabs value={tab} className="bg-card w-full overflow-hidden rounded-md">
               <div className="overflow-x-auto overflow-y-hidden">
                  <TabsList className="bg-transparent px-0 py-6">
                     {tabs.map(({ label, value }) => {
                        return (
                           <TabsTrigger
                              key={value}
                              value={value}
                              className="border-primary data-[state=active]:!bg-muted data-[state=active]:before:bg-primary relative flex cursor-pointer items-center justify-start gap-3 rounded-none bg-transparent px-8 py-4 text-start !shadow-none before:absolute before:right-0 before:bottom-0 before:left-0 before:h-1 before:rounded-t-xl data-[state=active]:before:content-['.']"
                              asChild
                           >
                              <Link
                                 href={route('student.exam.show', {
                                    id: exam.id,
                                    tab: value,
                                 })}
                              >
                                 <span>{label}</span>
                              </Link>
                           </TabsTrigger>
                        );
                     })}
                  </TabsList>
               </div>

               <Separator className="mt-[1px]" />

               <TabsContent value={tab} className="m-0 p-5">
                  {renderContent()}
               </TabsContent>
            </Tabs>
         </Card>
      </>
   );
};

Exam.layout = (page: ReactNode) => <Layout children={page} tab="exams" />;

export default Exam;
