import { useRouter } from 'next/navigation';
import Cookies from 'js-cookie';
import usePost from '@/Utils/Hooks/usePost';
import { CampaignAPI } from '@/Utils/APIRequest/Endpoints';
import { CustomToast } from '@/Utils/CustomToast';
import { useState } from 'react';
import CompleteCampaignConfirmationModal from './CompleteCampaignConfirmationModal';

/** Action handlers for campaign header buttons (rendered in CampaignDetailsTabs). */
const CampaignDetailHeader = (props) => {
    const { data, translations, setRestrictModalOpen, children } = props;
    const router = useRouter();
    const [modal, setModal] = useState<any>(null);

    const editHandler = () => {
        if (!data?.is_active) {
            setRestrictModalOpen(true)
            return
        }
        Cookies.remove('campaign_slug');
        router.push(`/brand/edit-campaign/${data?.slug ?? data?.campaign?.slug}`)
    }

    const { isPending: CompletePending, mutate } = usePost(`${CampaignAPI}/brand/complete/${data?.id}`, null, (response) => {
        if (response.status == 200 || response.status == 201) {
            CustomToast("success", translations?.campaignCompletedMessage);
            Cookies.remove('campaign_slug');
            router.push(`/brand/my-campaigns`);
        }
    }, 'Patch');

    const callbackFunction = () => {
        if (!data?.is_active) {
            setRestrictModalOpen(true)
            return
        }
        mutate()
    }

    const messageViewHandler = () => {
        const campaignId = data?.id ?? data?.campaign?.id;
        const slug = data?.slug ?? data?.campaign?.slug;
        router.push(`/brand/messages?campaignId=${campaignId}&slug=${slug}`);
    }

    return (
        <>
            {typeof children === 'function'
                ? children({
                    editHandler,
                    messageViewHandler,
                    openCompleteModal: () => setModal(data),
                    CompletePending,
                    showActions: data?.status == 'running',
                })
                : null}
            {modal && <CompleteCampaignConfirmationModal loader={CompletePending} modal={modal} setModal={setModal} callbackFunction={callbackFunction} translations={translations} />}
        </>
    )
}

export default CampaignDetailHeader