"use client"
import { UserSubscriptionsDataResponse, useUserSubscriptionsCreateMutation } from '@/services/UserSubscriptions'
import { SubscriptionsDataResponse, useSubscriptionsGetDataQuery } from '@/services/subscriptions'
import moment from 'moment'
import { useSession } from 'next-auth/react'
import React from 'react'
import { toast } from 'react-toastify'
import { getTranslation } from '../../../../i18n'
import { Empty } from '@/components/common/Empty'
import { LoadingForm } from '@/components/Form/loadingForm'
const { t } = getTranslation();
const ComponentsRowDetailsSubscriptions = () => {

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

    })

    if (isFetchingSubscriptions) {
        return <LoadingForm />
    }

    return (
        <div className='flex flex-col gap-4 justify-center items-center md:px-[70px]'>
            <div className=" text-center text-black text-opacity-90 text-[32px] font-bold font-['Alexandria'] leading-[56px]">الاشتراكات</div>
            <div className='flex justify-center gap-6 items-end max-md:flex-col w-full'>
                {Subscriptions?.details?.docs?.map(item => {
                    return <>
                        <CardSubscriptions data={item} />
                    </>
                })}
                 {Subscriptions?.details?.docs?.length == 0 &&
                        <Empty />
                    }

            </div>
        </div>
    )
}

export default ComponentsRowDetailsSubscriptions


export const CardSubscriptions = ({ data, UserSubs = [] }: { data: SubscriptionsDataResponse, UserSubs?: UserSubscriptionsDataResponse[] }) => {
    const [UserSubscriptionsCreate, { isLoading: isLoadingUserSubscriptionsCreate }] = useUserSubscriptionsCreateMutation()
    const session = useSession()
    const handlerSubscriptions = async () => {
        try {
            if (session.status == "unauthenticated") {
                return toast.error("يجب تسجيل الدخول اولا", { autoClose: 3000 });
            }
            await UserSubscriptionsCreate({
                userId: String(session.data?.user.userInfo.id),
                // TODO subDate, subExpiryDate is not supported  by the backend
                subDate: moment().format('YYYY-MM-DD'),
                // must be subDate + 1 year
                subExpiryDate: moment().add(1, 'years').format('YYYY-MM-DD'),
                subId: data.id,
                status: true,
            }).unwrap();
            toast.success(t("added-successfully"), { autoClose: 3000 });

        } catch (error: any) {
            console.log("error", error);
            if (error && error.message) {
                return toast.error(error.message, { autoClose: 3000 });
            }
            toast.error(JSON.stringify(error), { autoClose: 3000 });

        }

    }
    // TODO features subscriptions is not supported by the backend

    return (
        <div className="md:w-[420px] w-full hover:scale-[1.05] transition-transform px-4 py-4 StyleCard   rounded-3xl shadow border border-zinc-100 flex-col justify-center items-center gap-[22px] flex">
            <div className=" StyleLabel  text-2xl font-bold font-['Alexandria'] leading-9">{data.description}</div>
            <div className=" h-[66px] justify-center   gap-2.5 flex">
                <div className="text-black text-opacity-40 StyleLabelCurrency  text-xl font-normal font-['Alexandria'] leading-[30px]">ليرة</div>
                <div className="text-white text-[54px] StyleLabelPrimary font-bold font-['Alexandria'] leading-[66px]">{data.price.toLocaleString()}</div>
            </div>
            <div className="w-full flex-col  gap-3.5 flex ">
                <div className=" StyleLabel text-lg font-bold font-['Alexandria'] leading-[27px]">ماذا يشمل؟</div>
                <div className="h-[146px] flex-col   gap-3.5 flex">
                    {/* {JSON.parse(JSON.stringify(data.features))} */}
                    {Array.isArray(data.features) && data.features.map((item, index) => {
                        return <RowSubTitle key={index} title={item.name} isFull={item.value == 1} />;
                    })}
                    {/* <RowSubTitle title='تعليم عملي' isFull={true} />
                    <RowSubTitle title='تعليم إضافي' isFull={true} />
                    <RowSubTitle title='اهم الأسئلة المتكررة مع الأجوبة' isFull={true} />
                    <RowSubTitle title='محاولات غير محدودة للاختبارات' isFull={false} /> */}
                </div>
                {UserSubs.some(it => it.SubId == data.id) ?
                    <button

                        className="max-md:w-full hover:scale-[1.02] transition-transform  md:w-[347px] h-[62px] px-[38px] py-[26px] StyleLabelBgPrimary  rounded-[96px] justify-center items-center gap-1.5 inline-flex">
                        <div className="text-center  text-lg font-normal font-['Alexandria'] leading-[27px]">الاشتراك الحالي</div>
                    </button>
                    :

                    <button
                        onClick={handlerSubscriptions}
                        className="max-md:w-full hover:scale-[1.02] transition-transform  md:w-[347px] h-[62px] px-[38px] py-[26px] StyleLabelBgPrimary  rounded-[96px] justify-center items-center gap-1.5 inline-flex">
                        <div className="text-center  text-lg font-normal font-['Alexandria'] leading-[27px]">اشترك الان</div>
                        {isLoadingUserSubscriptionsCreate && <div className='loaderDots'></div>}
                    </button>
                }
            </div>
        </div>
    )
}


export const RowSubTitle = ({ title, isFull }: { title: string, isFull: boolean }) => {

    return (
        <div className="items-center gap-3.5 flex">
            <div className="grow shrink basis-0   StyleLabel text-base font-normal font-['Alexandria'] leading-normal">{title}</div>
            <div className="w-[26px] h-[26px] relative">
                <div className="w-[26px] h-[26px] left-0 top-0 absolute">
                    <svg className={`${isFull ? 'StyleLabelPrimaryAndWhite text-primary' : "text-white"}`} width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g clipPath="url(#clip0_119_2231)">
                            <path className={`${!isFull && ' text-[#C1C1C1]'}`} d="M13 26C20.1799 26 26 20.1799 26 13C26 5.8201 20.1799 0 13 0C5.8201 0 0 5.8201 0 13C0 20.1799 5.8201 26 13 26Z" fill="currentColor" />
                            <path className={`${isFull && 'StyleLabelWhite text-white'}`} d="M7.1167 13.8405L10.4785 17.2023L18.8831 8.79773" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                        </g>
                        <defs>
                            <clipPath id="clip0_119_2231">
                                <rect width="26" height="26" fill="currentColor" />
                            </clipPath>
                        </defs>
                    </svg>
                </div>
            </div>
        </div>
    )
}