import React from "react";
import Image from "next/image";
import { MRT_Icons } from "material-react-table";
import DraydexTableIcons from "@/common/DraydexTableIcons";

interface DatatableProps {
  columns: any;
  data: any;
}

const CustomersTable: React.FC<DatatableProps> = ({ columns, data }) => {
  const fontAwesomeIcons: Partial<MRT_Icons> = {
    FilterListIcon: () => (
      <span className="btn btn-link filterButton d-non">
        <Image
          src="/images/filter.png"
          alt=""
          id="logo"
          width={15}
          height={15}
        />
        &nbsp;Filter
      </span>
    ),
    FilterListOffIcon: () => (
      <span className="btn btn-link btn btn-primary filterButton">
        <Image
          src="/images/filter.png"
          alt=""
          id="logo"
          width={15}
          height={15}
        />
        &nbsp;Filter
      </span>
    ),
    ViewColumnIcon: () => (
      <span className="btn btn-link filterButton">
        <Image
          src="/images/edit-note-rounded.png"
          alt=""
          id="logo"
          width={15}
          height={15}
        />
        &nbsp;Edit View
      </span>
    ),
  };
  return (
    <>
      {" "}
      <div className="form-group carrier_btn_block">
        <DraydexTableIcons
          columns={columns}
          data={data}
          getRowId={(row) => row.id}
          enableColumnOrdering={false}
          enableGrouping={false}
          editingMode="table"
          enablePagination={true}
          enableDensityToggle={false}
          enableFullScreenToggle={false}
          enableTopToolbar={true}
          enableGlobalFilter={false}
          enableExpanding={false}
          enableSelectAll={false}
          icons={fontAwesomeIcons}
          enableBottomToolbar={true}
          muiTableHeadCellColumnActionsButtonProps={{
            hidden: true,
            sx: {
              color: "#FFF",
            },
          }}
          muiTablePaginationProps={{
            showFirstButton: false,
            showLastButton: false,
          }}
          muiTableProps={{
            sx: {
              tableLayout: "fixed",
            },
          }}
          muiTopToolbarProps={{
            sx: {
              color: "red",
              backgroundColor: "#f5f5f5",
              width: "auto",
              height: "100%",
            },
          }}
          muiTableBodyProps={{
            sx: {
              "& td:nth-of-type(1)": {
                color: "#3180F3",
                fontWeight: "600",
                lineHeight: "24px",
                fontSize: "12px",
              },
              "& td": {
                fontWeight: "600",
                lineHeight: "24px",
                fontSize: "12px",
              },
            },
          }}
          renderTopToolbarCustomActions={({ table }) => (
            <>
              <div className="Table_top  renderTopToolbarCustomActions">
                <div>
                  <p className="activeQuotes">ACTIVE / RECENT SPOT QUOTES</p>
                </div>
              </div>
              <div className="collapse" id="filter_">
                <div className="card card-body">
                  Some placeholder content for the collapse component. This
                  panel is hidden by default but revealed when the user
                  activates the relevant trigger.
                </div>
              </div>
            </>
          )}
        />
        <nav aria-label="Page navigation  example">
          <ul className="pagination pagei justify-content-end py-3">
            <li className={`page-item `}>
              <p className="page-link" style={{ cursor: "pointer" }}>
                Previous
              </p>
            </li>
            <li className={`page-item `}>
              <p
                className="page-link  number-bg"
                style={{ cursor: "pointer", font: "15px" }}
              >
                1
              </p>
            </li>
            <li className={`page-item `}>
              <p className="page-link" style={{ cursor: "pointer" }}>
                Next
              </p>
            </li>
          </ul>
        </nav>
      </div>
    </>
  );
};
export default CustomersTable;