'use client'

import { useQuery } from "@tanstack/react-query";
import { Form, Formik } from "formik";
import Loader from "@/Layout/Loader";
import CustomFetch from "@/Utils/APIRequest/AxiosInstance";
import { PlanAPI, PlanPermissionAPI } from "@/Utils/APIRequest/Endpoints";
import { CustomToast } from "@/Utils/CustomToast";
import usePost from "@/Utils/Hooks/usePost";
import { PermissionSchema, RequiredField, YupObject } from "@/Utils/ValidationSchema";
import EditPlanForm from "./EditPlanForm";
import { useTranslation } from "@/Utils/Hooks/useTranslate";

const EditPlan = (props) => {
    const { slug } = props
    const { translations } = useTranslation();

    // Get Plan List API
    const { data: PlanAPIData, isPending: PlanLoader,  } = useQuery({ queryKey: [PlanAPI], queryFn: () => CustomFetch({ url: PlanAPI, params: { status: -1 } }, null, false), refetchOnWindowFocus: false, select: (data) => data?.data?.data })

    // Get API
    const { data, isPending } = useQuery({ queryKey: [PlanAPI, slug], queryFn: () => CustomFetch({ url: `${PlanAPI}/${slug}` }, null, false), refetchOnWindowFocus: false, enabled: slug ? true : false, select: (data) => data?.data?.data });

    // Get Permission API
    const { data: PermissionData, isPending: permissionLoader } = useQuery({ queryKey: [PlanPermissionAPI], queryFn: () => CustomFetch({ url: PlanPermissionAPI }, null, false), refetchOnWindowFocus: false, enabled: slug ? false : true, select: (data) => data?.data?.permissions });


    // API Create/Update
    const { isPending: createLoader, mutate } = usePost(`${slug ? `${PlanAPI}/${data?.id}` : `${PlanAPI}`}`, '/admin/plan', (response) => {
        if (response.status == 200 || response.status == 201) {
            CustomToast("success", `Plan ${slug ? 'updated' : 'created'} successfully`)
        }
    }, `${slug ? 'put' : ''}`);


    if (isPending && slug || !slug && permissionLoader || PlanLoader) return <Loader />

    return (
        <div className='mt-1'>
            <Formik
                enableReinitialize
                initialValues={{
                    id: data?.id ?? "",
                    name: data?.name ?? "",
                    description: data?.description ?? "",
                    plan_type: data?.plan_type ?? "premium",
                    month_amount: data?.month_amount ?? "",
                    year_amount: data?.year_amount ?? "",
                    currency: "USD",
                    most_popular: data?.most_popular ?? false,
                    trial_days: data?.trial_days ?? 0,
                    parent_id: data?.parent_plan_id ?? "",
                    // priority: data?.priority ?? PlanAPIData?.length +" 1,
                    priority: data?.priority ?? "",
                    permissions: slug ? data?.permission : PermissionData ?? []
                }}
                validationSchema={YupObject({
                    name: RequiredField('Plan name is required'),
                    description: RequiredField('Plan description is required'),
                    plan_type: RequiredField('Plan plan type is required'),
                    month_amount: RequiredField('Monthly plan amount is required'),
                    year_amount: RequiredField('Yearly plan amount is required'),
                    currency: RequiredField('Plan currency is required'),
                    most_popular: RequiredField('Most popular status is required'),
                    trial_days: RequiredField('Trial days is required'),
                    permissions: PermissionSchema
                })}
                onSubmit={(values: any) => {
                    if ((values?.year_amount > 99999 || values?.month_amount > 99999)) {
                        CustomToast("error", 'Plan amount must be less than 99999');
                        return
                    }
                    
                    if (!slug) {
                        delete values.id;
                        delete values.priority
                    }
                    mutate(values);
                }}
            >
                {({ values, setFieldValue }) => {
                    return (
                        <Form className='flex-1' >
                            <EditPlanForm createLoader={createLoader} values={values} setFieldValue={setFieldValue} planListing={PlanAPIData} translations={translations} slug={slug} />
                        </Form>
                    )
                }}
            </Formik>
        </div>
    );
}

export default EditPlan;