'use client'
import { useSelector } from 'react-redux'
import moment from 'moment'
import { AppStore } from '@/lib/store'
import TableHoc from '@/Utils/HOC/TableHoc'
import { formatNumberWithCommas } from '@/Utils/Other/FormatNumberWithCommas'
import ImageWithFallback from '@/Component/Common/ImageWithFallback'
import NoDataTable from '@/Component/Common/Tables/NoData/NoDataTable'
import PrimaryButton from '@/Component/Common/Forms/PrimaryButton'
import CustomTableHead from '@/Component/Common/Tables/CustomTableHead'

const AdminPaymentTable = (props) => {
    const { setModal, apiData, translations, fetchStatus } = props;
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);
    const PaymentData = apiData?.data?.data

    const tableHeadData = {
        head: [
            { title: "Sr No.", sorting: false },
            { title: "Campaign Name", apiKey: "campaign_name", sorting: true },
            { title: "Brand Name", sorting: false },
            { title: "Influencer Name", sorting: false },
            { title: "Influencer's Phone Number", sorting: false },
            { title: "Amount Received", sorting: false },
            { title: "Amount Payable", sorting: false },
            { title: "Amount Received on", apiKey: "created_at", sorting: true },
            { title: "Action", sorting: false },
        ]
    }

    return (
        <>
            <table className="w-full text-sm text-left rtl:text-right">
                <CustomTableHead tableHeadData={tableHeadData} params={apiData?.params} setParams={apiData?.setParams} />
                <tbody>
                    {
                        PaymentData?.length > 0
                            ?
                            PaymentData?.map((payment, index) => (
                                <tr className="border-b border-lightGray last:border-none font-normal hover:bg-lightGray/20 align-middle" key={index}>
                                    <td className="px-5 py-4">
                                        {((apiData?.params.page - 1) * apiData?.params.per_page) + 1 + index}
                                    </td>
                                    <td className="px-5 py-4">
                                        {payment?.campaign?.campaign_name}
                                    </td>

                                    <td className="px-5 py-4">
                                        <div className="flex items-center capitalize  whitespace-nowrap">
                                            <div className=' px-2 min-w-7 h-7 mr-2 relative rounded-full overflow-hidden'>
                                                {userDetails && <ImageWithFallback src={payment?.brand?.image} alt='Profile' className='absolute w-full h-full object-cover left-0 right-0 top-0 bottom-0' height={48} width={48} />}
                                            </div>
                                            {payment?.brand?.first_name} {payment?.brand?.last_name}
                                        </div>
                                    </td>
                                    <td className="px-5 py-4">
                                        <div className="flex items-center capitalize  whitespace-nowrap">
                                            <div className=' px-2 min-w-7 h-7 mr-2 relative rounded-full overflow-hidden'>
                                                {userDetails && <ImageWithFallback src={payment?.influencer?.image} alt='Profile' className='absolute w-full h-full object-cover left-0 right-0 top-0 bottom-0' height={48} width={48} />}
                                            </div>
                                            {payment?.influencer?.first_name} {payment?.influencer?.last_name} ({payment?.influencer?.display_name})
                                        </div>
                                    </td>
                                    <td className="px-5 py-4">
                                        {payment?.influencer?.phone_number ? `${payment?.influencer?.country_code} ${payment?.influencer?.phone_number}` : '-'}
                                    </td>
                                    <td className="px-5 py-4">
                                        ${formatNumberWithCommas(payment?.amount)} {payment?.currency}
                                    </td>
                                    <td className="px-5 py-4">
                                        ${formatNumberWithCommas(payment?.influencer_payable_amount)} {payment?.currency}
                                    </td>
                                    <td className="px-5 py-4">
                                        {moment.utc(payment?.created_at).local().fromNow()}
                                    </td>
                                    <td className="px-5 py-4">
                                        <div className="flex items-center whitespace-nowrap">
                                            <PrimaryButton title='Pay Now' customClass="!py-1.5" onClick={() => setModal(payment)} />
                                        </div>
                                    </td>
                                </tr>
                            ))
                            : <NoDataTable colSpan={8} />
                    }
                </tbody>
            </table>
        </>
    )
}

export default TableHoc(AdminPaymentTable)