'use client'
import moment from 'moment'
import CustomTableHead from '@/Component/Common/Tables/CustomTableHead'
import { CategoryAPI, CategoryActiveInActiveAPI } from '@/Utils/APIRequest/Endpoints'
import { CustomToast } from '@/Utils/CustomToast'
import TableHoc from '@/Utils/HOC/TableHoc'
import usePost from '@/Utils/Hooks/usePost'
import ActiveDeactiveStatus from '@/Component/Common/Tables/ActiveDeactiveStatus'
import { TableDeleteSVG, TableEditSVG, TableEyeSVG } from '@/Component/Common/SVGs/CommonSVG'
import NoDataTable from '@/Component/Common/Tables/NoData/NoDataTable'
import ConfirmationModal from '@/Component/Common/Modal/ConfirmationModal'
import Link from 'next/link'
import ImageWithFallback from '@/Component/Common/ImageWithFallback'
import { useSelector } from 'react-redux'
import { AppStore } from '@/lib/store'
import PrimaryButton from '@/Component/Common/Forms/PrimaryButton'
import Loader from '@/Layout/Loader'
import { formatNumberWithCommas } from '@/Utils/Other/FormatNumberWithCommas'

const AdminPaymentCompletedTable = (props) => {
    const { setModal, apiData, translations } = 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: "Amount Received", sorting: false },
            { title: "Amount Paid", sorting: false },
            { title: "Amount Paid on", apiKey: "updated_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">
                                        ${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?.updated_at).local().fromNow()}
                                    </td>
                                </tr>
                            ))
                            : <NoDataTable colSpan={8} />
                    }
                </tbody>
            </table>
        </>
    )
}

export default TableHoc(AdminPaymentCompletedTable)