"use client"

import { useGetUsertheorytrainByTheoryTrainIdAndUserIdQuery } from "@/services/usertheorytrain";
import { getTranslation } from "../../../../../i18n";
import { useSession } from "next-auth/react";
import Link from "next/link";
import { useTheoryTrainAttemptsGetDataByIdQuery } from "@/services/theoryTrainAttempts";

export const ComponentResult = ({ id, theoryTrainAttemptId }: { id: string, theoryTrainAttemptId: string }) => {
   console.log("theoryTrainAttemptId",theoryTrainAttemptId);
   console.log("id",id);
   
    const { t } = getTranslation();
    const { data: sessionData } = useSession();
    const userId = sessionData?.user?.userInfo?.id;
    const { data: DataTheoryTrainAttemptsGetDataById, isFetching: isFetchingTheoryTrainAttemptsGetDataById } = useTheoryTrainAttemptsGetDataByIdQuery({
        id: String(theoryTrainAttemptId),
    });

    // const subResult = DataTheoryTrainAttemptsGetDataById?.info?.Answers?.filter(it => it.Choice.status == true).length ?? 0
    const subResult = DataTheoryTrainAttemptsGetDataById?.info?.Answers?.filter(it => it.Choice?.status == true).length ?? 0

    const total = DataTheoryTrainAttemptsGetDataById?.info?.UserTheoryTrain.TheoryTrain?.Questions?.length ?? 0
    const result = subResult / total * 100

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

        <div className='w-full md:px-10 flex-col flex justify-center items-center gap-10'>
            <div className="text-center"><span className="px-1 text-black text-opacity-90 text-[28px] font-bold font-['Alexandria'] leading-[42px]">
                {result >= 50 ? " مبروك!" : " للاسف!"}
            </span>
                <span className="text-black px-1 text-opacity-90 text-[28px] font-bold font-['Alexandria'] leading-[42px]">

                    {result >= 50 ? "لقد نجحت بالاختبار" : "لقد فشلت بالاختبار"}
                </span>
                <span className={`${result >= 50 ? "text-success" : "text-danger"}  px-1 text-opacity-90 text-[28px] font-bold font-['Alexandria'] leading-[42px]`}> {parseFloat(result.toFixed(2))}%</span>
            </div>
            <div className={`w-[184px] h-[184px] pl-[54px] pr-[53px] py-16 bg-white rounded-[180px] border-[24px]   ${result >= 50 ? "border-green-600 text-green-600" : "border-danger text-danger"} justify-center items-center inline-flex`}>
                <div className="text-center  text-[64px] font-semibold font-['Alexandria'] leading-[56px]">{parseFloat(Number(DataTheoryTrainAttemptsGetDataById?.info?.score ?? 0).toFixed(1))}</div>
            </div>
            {/* <CircularProgress size={200} progress={100} strokeWidth={25} end={DataTheoryTrainAttemptsGetDataById?.info?.TheoryTrain?.Questions?.length} /> */}

            <div className="text-right text-black text-opacity-60 text-base font-medium font-['Alexandria'] leading-normal">

                قمت بالاجابة على   {subResult} سؤال بشكل صحيح من اصل {total} سؤال
            </div>

            <Link href={"/"} className="w-[261px] h-[62px] px-8 py-[26px] bg-indigo-600 rounded-[96px] justify-center items-center gap-1.5 inline-flex">
                <div className="text-center text-white text-lg font-semibold font-['Alexandria'] leading-[27px]">العودة الى لوحة التحكم</div>
            </Link>
        </div>
    )
}