import { useSelector } from "react-redux";
import moment from "moment";
import ImageWithFallback from "@/Component/Common/ImageWithFallback";
import CustomTableHead from "@/Component/Common/Tables/CustomTableHead";
import NoDataTable from "@/Component/Common/Tables/NoData/NoDataTable";
import { AppStore } from "@/lib/store";
import TableHoc from "@/Utils/HOC/TableHoc";
import { formatNumberWithCommas } from "@/Utils/Other/FormatNumberWithCommas";

const AdminPaymentHistoryAllTable = (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: "User Name", sorting: false },
            { title: "Amount", sorting: false },
            { title: "Transaction Date", apiKey: "updated_at", sorting: true },
        ]
    }

    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?.users?.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?.users?.first_name} {payment?.users?.last_name}
                                        </div>
                                    </td>
                                    <td className="px-5 py-4">
                                        ${formatNumberWithCommas(payment?.amount)} {payment?.currency}
                                    </td>
                                    <td className="px-5 py-4">
                                        {moment.utc(payment?.created_at).local().format('DD MMM YYYY hh:mm A')}
                                    </td>
                                </tr>
                            ))
                            : <NoDataTable colSpan={8} />
                    }
                </tbody>
            </table>
        </>
    )
}

export default TableHoc(AdminPaymentHistoryAllTable)