'use client'
import { useEffect, useState } from "react"
import { useQuery } from "@tanstack/react-query"
import { useSelector } from "react-redux"
import { CampaignAPI, PermissionAPI } from "@/Utils/APIRequest/Endpoints"
import { useTranslation } from "@/Utils/Hooks/useTranslate"
import { useLoading } from "@/Utils/Hooks/useLoading"
import CustomFetch from "@/Utils/APIRequest/AxiosInstance"
import { CustomToast } from "@/Utils/CustomToast"
import { AppStore } from "@/lib/store"
import { CampainStepSVG } from "@/Component/Common/SVGs/CommonSVG"
import LimitExceedModal from "@/Component/Common/Modal/LimitExceedModal"
import CampaignForm from "./CampaignForm"

const CreateCampaign = (props) => {
    const { slug } = props;
    const { translations } = useTranslation();
    const { skeletonLoading, startSkeletonLoading, stopSkeletonLoading } = useLoading();
    const [modal, setModal] = useState<any>(null);
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);

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

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

    useEffect(() => {
        if (PermissionData && !PermissionData?.number_of_campaigns && slug == undefined) {
            if(userDetails?.subscription?.[0]?.plan?.plan_type == 'free'){
                setModal(true);
            } else{
                CustomToast("warning", "You have reached the limit of creating campaigns");
            }
        }
    }, [PermissionData, slug]);

    useEffect(() => {
        startSkeletonLoading();
        setTimeout(() => {
            stopSkeletonLoading();
        }, 1000);
    }, []);

    return (
        <>
            <div>
                <div className='flex md:items-center justify-between md:pb-5 pb-2.5 max-md:flex-col gap-2'>
                    <h1 className='lg:text-3xl md:text-2xl text-xl font-bold'>{slug ? translations?.editCampaign : translations?.createCampaign} </h1>
                </div>
                <div className="flex gap-3 items-center border-b border-lightGray md:mb-7 mb-4 pb-5 overflow-x-auto whitespace-nowrap">
                    <span className="border border-transparent bg-black md:px-5 px-2.5 py-1 text-white md:text-base text-sm rounded-full">{translations?.campaignOverview}</span>
                    <CampainStepSVG customClass="min-w-5" />
                    <span className="border border-lightGray bg-transparent md:px-5 px-2.5 py-1 text-black md:text-base text-sm rounded-full">{translations?.influencerPool}</span>
                    <CampainStepSVG customClass="min-w-5" />
                    <span className="border border-lightGray bg-transparent md:px-5 px-2.5 py-1 text-black md:text-base text-sm rounded-full">{translations?.campaignManagement}</span>
                    <CampainStepSVG customClass="min-w-5" />
                    <span className="border border-lightGray bg-transparent md:px-5 px-2.5 py-1 text-black md:text-base text-sm rounded-full">{translations?.payment}</span>
                </div>
                <CampaignForm slug={slug} skeletonLoading={skeletonLoading} CampaignDetailData={CampaignDetailData} translations={translations} setModal={setModal} PermissionData={PermissionData} userDetails={userDetails} />
            </div>
            {modal && <LimitExceedModal setModal={setModal} modal={modal} args={{ message: "You have reached the maximum number of campaigns" }} translations={translations} />}
        </>
    )
}

export default CreateCampaign