import { useLazyUserGetDataByIdQuery } from "@/services/user";
import { getTranslation } from "../../../../i18n";
import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { useSession } from "next-auth/react";
import { CardSubscriptions } from "../subscriptions/ComponentsRowDetailsSubscriptions";
import { useSubscriptionsGetDataQuery } from "@/services/subscriptions";
import Loading from "@/components/layouts/loading";
import { LoadingForm } from "@/components/Form/loadingForm";

export const Subscriptions = () => {
    const { t } = getTranslation();
    const router = useRouter();
    const session = useSession();

    const [GetData, { currentData, isFetching }] = useLazyUserGetDataByIdQuery();

    useEffect(() => {
        session.data?.user.userInfo.id &&
            GetData({ id: String(session.data?.user.userInfo.id ?? "") })

    }, [session])

    const { currentData: Subscriptions, isFetching: isFetchingSubscriptions } = useSubscriptionsGetDataQuery({
        page: 1,
        paginate: 100,

    }) 
    if (isFetching ||isFetchingSubscriptions) {
        return <LoadingForm />
    }

    return (

        <div className='flex justify-center gap-6 items-center max-md:flex-col w-full flex-wrap'>
            {Subscriptions?.details?.docs?.map((item, index) => {
                return <CardSubscriptions key={index} data={item} UserSubs={currentData?.info.UserSubs ?? []} />
            })}
        </div>
    )
}