'use client'
import CampaignInfo from '@/Component/Brand/MyCampaigns/CampaignDetail/CampaignDetailsTabs/CampaignManagement/CampaignManagementDetail/CampaignInfo';
import Loader from '@/Layout/Loader';
import { AppStore } from '@/lib/store';
import CustomFetch from '@/Utils/APIRequest/AxiosInstance';
import { DisputeAPI } from '@/Utils/APIRequest/Endpoints';
import { useQuery } from '@tanstack/react-query';
import { useSelector } from 'react-redux';
import InfluencerInfo from './InfluencerInfo';
import CampaignBrandDetail from '@/Component/Influencer/InfluencerJobs/JobDetails/CampaignBrandDetail';
import DisputeBox from './DisputeBox';
import GradientButton from '@/Component/Common/Forms/GradientButton';
import { useEffect, useState } from 'react';
import DeclareWinnerModal from './DeclareWinnerModal';
import CampaignManagementDetail from '@/Component/Brand/MyCampaigns/CampaignDetail/CampaignDetailsTabs/CampaignManagement/CampaignManagementDetail';
import useOutsideDropdown from '@/Utils/Hooks/useOutsideDropdown';
import { useTranslation } from '@/Utils/Hooks/useTranslate';

const DisputeDetail = (props) => {
    const { slug } = props;
    const { translations } = useTranslation();
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);
    const [modal, setModal] = useState(null);
    const [openSideModal, setOpenSideModal] = useState<any>(null);

    const { ref, isComponentVisible, setIsComponentVisible } = useOutsideDropdown();
    useEffect(() => {
        setIsComponentVisible(openSideModal ? true : false)
    }, [openSideModal])
    // Get API
    const { data: DisputeDetailData, isPending, refetch } = useQuery({ queryKey: [DisputeAPI, slug], queryFn: () => CustomFetch({ url: `${DisputeAPI}/${slug}` }, null, false), refetchOnWindowFocus: false, select: (data) => data?.data?.data });

    if (isPending) {
        return <Loader />
    }

    console.log("DisputeDetailData", DisputeDetailData);
    

    const handleSidePanel = () => {
        // setOpenSideModal(DisputeDetailData)
        
        setOpenSideModal({ slug: DisputeDetailData?.campaign?.slug, status: DisputeDetailData?.campaign_influencer?.status, campaignDetailId: DisputeDetailData?.campaign?.id, influencerData: { influencer: DisputeDetailData?.influencer } });
    }

    return (
        <>
            <div className='grid grid-cols-12 gap-4'>
                <div className='col-span-8'>
                    <div className='border border-lightGray rounded-xl pt-2.5 px-5 pb-5 bg-white shadow'>
                        <CampaignInfo campaignInfoData={DisputeDetailData?.campaign} translations={translations} />
                        <span className='text-xs text-primary underline font-medium mt-5 block cursor-pointer' onClick={handleSidePanel}>View More Details</span>
                    </div>
                    <div className='flex items-center justify-between mt-5 mb-3'>
                        <h3 className='font-semibold text-xl'>Dispute Details</h3>
                        {DisputeDetailData?.winner ? <span className='text-lg font-semibold capitalize text-green-500'>Winner : {DisputeDetailData?.winner}</span> :
                            <GradientButton onClick={() => setModal(DisputeDetailData)}>Declare Winner</GradientButton>}
                    </div>
                    {DisputeDetailData?.disputeHistory?.map((item, index) => {
                        return (
                            <DisputeBox key={index} data={item} userDetails={userDetails} />
                        )
                    })}
                </div>
                <div className='col-span-4'>
                    <div className='mb-5'>
                        <CampaignBrandDetail campaignBrandDetailData={DisputeDetailData?.brandDetails} />
                    </div>
                    <div className='mb-5'>
                        <InfluencerInfo data={DisputeDetailData?.influencer} userDetails={userDetails} />
                    </div>
                    {/* <div className="rounded-xl py-4 px-5 bg-gray/10">
                        <div className="font-semibold mb-3">
                            Chat
                        </div>
                        <ChatMessageList groupId={DisputeDetailData?.campaign_influencer?.id} />
                    </div> */}
                </div>
            </div>
            {modal && <DeclareWinnerModal modal={modal} setModal={setModal} refetch={refetch} />}
            {isComponentVisible && <CampaignManagementDetail openSideModal={openSideModal} setOpenSideModal={setOpenSideModal} MainListRefetch={refetch} ref={ref} isComponentVisible={isComponentVisible} setIsComponentVisible={setIsComponentVisible} translations={translations}/>}
        </>
    )
}

export default DisputeDetail