'use client';

import { useRouter, useParams } from 'next/navigation';
import moment from 'moment';
import CustomTableHead from '@/Component/Common/Tables/CustomTableHead';
import { AdminPaymentMethodListAPI } from '@/Utils/APIRequest/Endpoints';
import { CustomToast } from '@/Utils/CustomToast';
import TableHoc from '@/Utils/HOC/TableHoc';
import usePost from '@/Utils/Hooks/usePost';
import { TableDeleteSVG, TableEditSVG } from '@/Component/Common/SVGs/CommonSVG';
import NoDataTable from '@/Component/Common/Tables/NoData/NoDataTable';
import ConfirmationModal from '@/Component/Common/Modal/ConfirmationModal';
import { PaymentMethodRecord } from './types';
import ActiveDeactiveStatus from '@/Component/Common/Tables/ActiveDeactiveStatus';

function PaymentMethodTable(props: {
  apiData: any;
  search?: string;
  deleteModal: PaymentMethodRecord | null;
  setDeleteModal: (v: PaymentMethodRecord | null) => void;
  refetch: () => void;
  translations?: any;
}) {
  const router = useRouter();
  const params = useParams();
  const role = (params?.role as string) || 'admin';
  const { apiData, deleteModal, setDeleteModal, refetch } = props;
  const data = apiData?.data?.data ?? apiData?.data ?? [];
  const list: PaymentMethodRecord[] = Array.isArray(data) ? data : [];

  const { isPending: deleteLoader, mutate: deleteMutate } = usePost(
    deleteModal?.id ? `${AdminPaymentMethodListAPI}/${deleteModal.id}` : '',
    null,
    (response) => {
      if (response?.status === 200 || response?.status === 204 || response?.status === 201) {
        CustomToast('success', 'Payment method deleted successfully');
        refetch();
        setDeleteModal(null);
      }
    },
    'delete'
  );

  const tableHeadData = {
    head: [
      { title: 'Sr No.', sorting: false },
      { title: 'Name', apiKey: 'name', sorting: true },
      { title: 'Created At', apiKey: 'created_at', sorting: true },
      { title: 'Status', apiKey: 'is_active', 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>
          {list?.length > 0 ? (
            list.map((row: PaymentMethodRecord, index: number) => (
              <tr
                className="border-b border-lightGray last:border-none font-normal hover:bg-lightGray/20 align-middle"
                key={row.id ?? index}
              >
                <td className="px-5 py-4">
                  {((apiData?.params?.page ?? 1) - 1) * (apiData?.params?.per_page ?? 50) + index + 1}
                </td>
                <td className="px-5 py-4 font-medium">{row.name ?? '-'}</td>
                <td className="px-5 py-4">
                  {row.created_at
                    ? moment.utc(row.created_at).local().format('DD MMM YYYY')
                    : '-'}
                </td>
                <ActiveDeactiveStatus data={row} apiProps={{ endpoint: `${AdminPaymentMethodListAPI}/change-status/${row.id}`, path: null }} refetch={refetch} />
                <td className="px-5 py-4">
                  <div className="flex items-center gap-2">
                    <button
                      type="button"
                      onClick={() => router.push(`/${role}/payment-method/edit/${row.id}`)}
                      className="p-0.5 inline-flex items-center gap-1"
                      title="Edit payment method"
                    >
                      <TableEditSVG />
                    </button>
                    <button
                      type="button"
                      onClick={() => setDeleteModal(row)}
                      className="p-0.5"
                      title="Delete"
                    >
                      <TableDeleteSVG />
                    </button>
                  </div>
                </td>
              </tr>
            ))
          ) : (
            <NoDataTable colSpan={5} />
          )}
        </tbody>
      </table>
      {deleteModal && (
        <ConfirmationModal
          loader={deleteLoader}
          modal={deleteModal}
          args={{
            message: 'Are you sure you want to delete this payment method? It can only be deleted if not assigned to any country.',
            buttonText: 'Delete',
          }}
          setModal={setDeleteModal}
          callbackFunction={() => deleteMutate()}
          translations={props.translations}
        />
      )}
    </>
  );
}

export default TableHoc(PaymentMethodTable) as any;