"use client"
import React, { useEffect } from 'react'
import { Icon1, Icon2, Icon3, Icon4, Icon5 } from '../icons/icons'
import { useParams, usePathname, useRouter, useSearchParams } from 'next/navigation'
import { getTranslation } from '../../../../../i18n'
import { useSession } from 'next-auth/react'
import { useLazyExamGetDataByUserIdAndTheoryTrainIdQuery } from '@/services/exam'

export const ComponentSectionNumber = ({ id }: { id: string }) => {
    const router = useRouter()
    const pathname = usePathname()
    const { t } = getTranslation();
    const { data: sessionData } = useSession();
    const userId = sessionData?.user?.userInfo?.id;

    const [ExamGetDataByUserIdAndTheoryTrainId, { currentData: dataExamGetDataByUserIdAndTheoryTrainId, isFetching: isFetchingExamGetDataByUserIdAndTheoryTrainId }] = useLazyExamGetDataByUserIdAndTheoryTrainIdQuery()
    useEffect(() => {
        if (userId && id) {
            ExamGetDataByUserIdAndTheoryTrainId({
                userId: String(userId),
                theoryTrainId: String(id),
            })
        }
    }, [userId, id])

    if (isFetchingExamGetDataByUserIdAndTheoryTrainId) {
        return <div className='flex justify-center items-center h-[50vh]'>
            <div className="loader !bg-primary"></div>
        </div>
    }

    return (
        <div className='flex flex-col gap-4'>
            <div className=" text-black text-opacity-90 text-[32px] font-bold font-['Alexandria'] leading-[35px]">{dataExamGetDataByUserIdAndTheoryTrainId?.theoryTrain?.title}</div>
            {/* <div className=" text-black text-opacity-90 text-[24px] font-bold font-['Alexandria'] leading-[33px]">{dataExamGetDataByUserIdAndTheoryTrainId?.theoryTrain?.description}</div> */}
            <div className="text-right text-black text-opacity-60 text-2xl font-normal font-['Alexandria'] leading-9">اختر رقم الاختبار</div>
            <div className='flex justify-center items-center gap-8 max-md:flex-wrap'>
                <Icon1
                    onClick={() => {
                        router.push(pathname + "?start=true&number=1")
                    }}
                    className='w-28 h-28' />
                <Icon2
                    onClick={() => {
                        router.push(pathname + "?start=true&number=2")
                    }}
                    className='w-28 h-28' />
                <Icon3
                    onClick={() => {
                        router.push(pathname + "?start=true&number=3")
                    }}
                    className='w-28 h-28' />
                <Icon4
                    onClick={() => {
                        router.push(pathname + "?start=true&number=4")
                    }}
                    className='w-28 h-28' />
                <Icon5
                    onClick={() => {
                        router.push(pathname + "?start=true&number=5")
                    }}
                    className='w-28 h-28' />
            </div>
        </div>
    )
}