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';
import moment from 'moment';
import React from 'react'
import { useSelector } from 'react-redux';

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

    const tableHeadData = {
        head: [
            { title: "Sr No.", sorting: false },
            { title: "Brand", sorting: false },
            { title: "Plan Name", sorting: false },
            { title: "Amount", sorting: false },
            { title: "Interval", sorting: false },
            { title: "Start Date", apiKey: "start_date", sorting: true },
            { title: "End Date", apiKey: "end_date", sorting: true },
            { title: "Status", apiKey: "status", sorting: true },
        ]
    }

    return (
        <>
            <table className="w-full text-sm text-left rtl:text-right">
                <CustomTableHead tableHeadData={tableHeadData} params={apiData?.params} setParams={apiData?.setParams} />
                <tbody>
                    {
                        SubHistoryData?.length > 0
                            ?
                            SubHistoryData?.map((history, 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">
                                        <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={history?.subsciption?.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>
                                            {history?.subsciption?.users?.first_name} {history?.subsciption?.users?.last_name}
                                        </div>
                                    </td>
                                    <td className="px-5 py-4">
                                        {history?.subsciption?.plan?.name}
                                    </td>
                                    <td className="px-5 py-4">
                                        ${formatNumberWithCommas(history?.final_amount	)} USD
                                    </td>
                                    <td className="px-5 py-4 capitalize">
                                        {history?.subsciption?.interval === 'month' ? 'Monthly' : 'Yearly'}
                                    </td>
                                    <td className="px-5 py-4">
                                        {moment.utc(history?.start_date).local().format('DD MMM YYYY')}
                                    </td>
                                    <td className="px-5 py-4">
                                        {moment.utc(history?.end_date).local().format('DD MMM YYYY')}
                                    </td>
                                    <td className="px-5 py-4 capitalize">
                                        <span className={`${history?.status === 'active' ? 'bg-green-500' : history?.status === 'canceled' ? 'bg-red-500' :  history?.status === 'pending' ? 'bg-darkGray' : 'bg-yellow-500'} inline-block px-2 py-1 rounded-md text-white text-sm`}>{history?.status}</span>                                        
                                    </td>
                                </tr>
                            ))
                            : <NoDataTable colSpan={8} />
                    }
                </tbody>
            </table>
        </>
    )
}

export default TableHoc(AdminPaymentSubscriptionAllHistoryTable)