'use client'
import { useSelector } from "react-redux";
import { useQuery } from "@tanstack/react-query";
import CustomFetch from "@/Utils/APIRequest/AxiosInstance";
import { CampaignAPI } from "@/Utils/APIRequest/Endpoints";
import { AppStore } from "@/lib/store";
import { useTranslation } from "@/Utils/Hooks/useTranslate";
import CampaignDetailHeader from "./CampaignDetailHeader";
import CampaignDetailsTabs from "./CampaignDetailsTabs";
import { useEffect, useState } from "react";
import CampaignRestrictModal from "./CampaignDetailsTabs/CampaignManagement/CampaignManagementDetail/CampaignRestrictModal";

const CampaignDetail = (props) => {
    const { slug } = props;
    const { translations } = useTranslation();
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);
    const [modal, setModal] = useState(false);
    const [restrictModalOpen, setRestrictModalOpen] = useState(false);

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

    useEffect(() => {
        if (CampaignDetailData?.invited == 0 && CampaignDetailData?.hired == 0 && CampaignDetailData?.applied == 0) {
            setModal(true);
        } else {
            setModal(false);
        }
    }, [CampaignDetailData?.invited, CampaignDetailData?.hired, CampaignDetailData?.applied]);

    return (
        <>
            {!CampaignDetailData?.is_active && fetchStatus !== "fetching" && !campaignDetailLoader &&
                <div className="bg-red-500 text-white py-4 px-3 rounded-lg mb-5 text-sm">
                    <div dangerouslySetInnerHTML={{ __html: translations?.thisCampaignIsCurrentlyRestrictedMessage }} />
                </div>
            }

            <CampaignDetailHeader data={CampaignDetailData} translations={translations} setRestrictModalOpen={setRestrictModalOpen}>
                {({ editHandler, messageViewHandler, openCompleteModal, CompletePending, showActions }) => (
                    <CampaignDetailsTabs
                        CampaignDetailData={CampaignDetailData}
                        campaignDetailRefetch={refetch}
                        isPending={campaignDetailLoader}
                        translations={translations}
                        modal={modal}
                        setModal={setModal}
                        setRestrictModalOpen={setRestrictModalOpen}
                        showActions={showActions}
                        editHandler={editHandler}
                        messageViewHandler={messageViewHandler}
                        openCompleteModal={openCompleteModal}
                        CompletePending={CompletePending}
                    />
                )}
            </CampaignDetailHeader>

            {restrictModalOpen && <CampaignRestrictModal setRestrictModalOpen={setRestrictModalOpen} restrictModalOpen={restrictModalOpen} translations={translations} />}
        </>
    )
}

export default CampaignDetail