import React, { useState } from 'react'
import { useSelector } from 'react-redux';
import moment from 'moment';
import ImageWithFallback from '@/Component/Common/ImageWithFallback';
import JobSavedToggle from '@/Component/Influencer/InfluencerJobs/JobSavedToggle';
import { AppStore } from '@/lib/store';
import { formatNumber } from '@/Utils/Other/FormateNumbers';
import PrimaryButton from '@/Component/Common/Forms/PrimaryButton';
import { formatNumberWithCommas } from '@/Utils/Other/FormatNumberWithCommas';

const RecommendJobBox = (props) => {
    const { itemData, setOpenSideModal, translations } = props;
    const [isSaved, setIsSaved] = useState(itemData?.isCampaignSaved);
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails)
    const isEasyApply = itemData?.campaignInfluencers?.length === 0 || itemData?.campaignInfluencers?.[0]?.status == "waiting_for_quotations" || itemData?.campaignInfluencers?.[0]?.status == "uncontacted";

    const handleBoxClick = (event) => {
        if (event.target.tagName === 'BUTTON' || event.target.tagName === 'A' || event.target.closest('button') || event.target.closest('a')) {
            return;
        }
        setOpenSideModal({ slug: itemData?.slug, campaignDetailId: itemData?.id });
    };

    return (
        <div className='border border-lightGray rounded-2xl py-4 2xl:px-5 px-4 hover:bg-primary/5 cursor-pointer bg-white shadow' onClick={(e) => handleBoxClick(e)}>
            <div className='flex items-center justify-between'>
                <div className='flex items-center gap-3'>
                    {itemData.budget_per_influencer > 0 && <span className='text-lg font-bold flex items-center gap-1'><span role="img" aria-label="cash" className="text-sm">💰</span> ${formatNumberWithCommas(itemData.budget_per_influencer)} {itemData?.currency} </span>}
                    {itemData.product_value > 0 && <span className='text-lg font-bold flex items-center gap-1'><span role="img" aria-label="cash" className="text-sm">🎁</span> ${formatNumberWithCommas(itemData.product_value)} {itemData?.currency} </span>}
                </div>
                <JobSavedToggle data={itemData} setIsSaved={setIsSaved} isSaved={isSaved} />
            </div>
            <div className='flex items-center gap-5 mt-4'>
                <div className='min-w-12 w-12 h-12 rounded-full overflow-hidden'>
                    <ImageWithFallback src={itemData?.users?.image} alt="Logo" width={48} height={48} className='w-full h-full object-cover' />
                </div>
                <div className='flex flex-col'>
                    <h5 className='text-base font-semibold line-clamp-1'>{itemData.campaign_name}</h5>
                    <div className='flex items-center gap-1.5 text-sm'>
                        <span className='text-xs'>{itemData?.users?.first_name} {itemData?.users?.last_name}</span>
                        <span className="rounded-full overflow-hidden text-gray">•</span>
                        <span className='text-xs'>{translations?.postedOn}: {moment(itemData.posting_start_date).format('DD MMM YYYY')}</span>
                    </div>
                </div>
            </div>
            <PrimaryButton
                buttonType="button"
                customClass={`!rounded-md mt-4 w-full !bg-none !font-semibold ${isEasyApply ? '!bg-primary !text-white !border-primary' : '!bg-neutral-200 !text-neutral-700 !border-neutral-300'}`}
                onClick={() => setOpenSideModal({ slug: itemData?.slug, campaignDetailId: itemData?.id })}
            >
                {isEasyApply ? translations?.easyApply : translations?.applied}
            </PrimaryButton>
        </div>
    )
}

export default RecommendJobBox