import React from "react";
import { PmsGrid } from "../../services/pmsGrid";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import { formatFigure } from "../../utils/appUtils";
import { CollectionRepository } from "../../repositories/ColllectionRepository";

const PmGridCollection = ({ selectedProject, fromDate, toDate, isPending }) => {
  const columns = [
    {
      key: "invoiceNumber",
      title: "Invoice Number",
      className: "text-start",
      groupable: true,
    },
    { key: "title", title: "Title", sortable: true, className: "text-start" },
    {
      key: "clientSubmitedDate",
      title: "Submission Date",
      className: "text-start",
      groupable: true,
    },
    {
      key: "exceptedPaymentDate",
      title: "Expected Payment Date",
      className: "text-start",
    },
    { key: "totalAmount", title: "Total Amount" },
    { key: "balanceAmount", title: "Balance" },
    { key: "isActive", title: "Status" },
  ];

  const fetcher = async ({ page, pageSize, search, filter }) => {
    const response = await CollectionRepository.getCollections(
      selectedProject,
      search || "",
      fromDate,
      toDate,
      pageSize,
      page,
      true, // isActive
      isPending,
      filter
    );

    const api = response.data;

    return {
      rows: api.data.map((item) => ({
        id: item.id,
        invoiceNumber: item.invoiceNumber,
        title: item.title,

        clientSubmitedDate: formatUTCToLocalTime(item.clientSubmitedDate),
        exceptedPaymentDate: formatUTCToLocalTime(item.exceptedPaymentDate),

        totalAmount: formatFigure(item.basicAmount + item.taxAmount, {
          type: "currency",
          currency: "INR",
        }),

        balanceAmount: formatFigure(item.balanceAmount, {
          type: "currency",
          currency: "INR",
        }),

        isActive: item.isActive ? (
          <span className="badge bg-label-primary">
            <span className="badge badge-dot bg-primary me-1"></span>
            Active
          </span>
        ) : (
          <span className="badge bg-label-danger">
            <span className="badge badge-dot bg-danger me-1"></span>
            In-Active
          </span>
        ),
      })),

      total: api.totalEntities,
    };
  };

  return (
  <PmsGrid
  columns={columns}
  serverMode
  fetcher={fetcher}
  rowKey="id"
  features={{
    search: true,
    pagination: true,
    pinning: true,
    resizing: true,
    selection: false,
    reorder: true,
    columnVisibility: true,
    pageSizeSelector: true,

    grouping: true,
    groupByKey: "clientSubmitedDate",

    aggregation: true,
    IsNumbering: true,

    actions: [
      {
        label: "Edit",
        icon: "bx-edit ",
        onClick: (row) => console.log("Edit", row),
      },
      {
        label: "Delete",
        icon: "bx-trash text-danger",
        onClick: (row) => console.log("Delete", row),
      },
    ],
  }}
/>

  );
};

export default PmGridCollection;