import { Table } from "@tanstack/react-table";
import {
  TableFirstPageIcon,
  TableLastPageIcon,
  TableNextPageIcon,
  TablePreviousPageIcon,
} from "../../../assets/svg";
import "./index.scss";
import { CraftTablePaginationProps } from "../../../types/table";

interface DefaultPaginationProps<T> {
  table: Table<T>;
  rowsPerPageArray: number[];
  paginationOptions?: CraftTablePaginationProps;
}

function DefaultPagination<T>({
  table,
  rowsPerPageArray,
  paginationOptions,
}: DefaultPaginationProps<T>) {
  const pageIndex = table.getState().pagination.pageIndex + 1;
  const pageCount = table.getPageCount();
  const pageSize = table.getState().pagination.pageSize;
  const rowCount = table.getRowCount();
  const recordsRangeFirst = pageIndex * pageSize - pageSize + 1;
  const recordsRangeLast = Math.min(pageIndex * pageSize, rowCount);

  return (
    <div className="pagination_container">
      {paginationOptions?.paginationView === "full" ? (
        <>
          <span className="go_to_page_container">
            &nbsp;&nbsp;Go to page&nbsp;:&nbsp;
            <input
              type="number"
              defaultValue={pageIndex}
              onKeyDown={(e) => {
                if (e.key === "Enter") {
                  const page = e.currentTarget.value
                    ? Number(e.currentTarget.value) - 1
                    : 0;
                  table.setPageIndex(page);
                }
              }}
              style={{ width: "60px", textAlign: "center" }}
              min={1}
              max={table?.getPageCount()}
            />
            &nbsp;
          </span>

          <div className="rows_per_page_container">
            <span>Rows Per Page&nbsp;:&nbsp;</span>
            <select
              value={table.getState().pagination.pageSize}
              onChange={(e) => {
                table.setPageSize(Number(e.target.value));
              }}
            >
              {rowsPerPageArray.map((pageSize) => (
                <option key={pageSize} value={pageSize}>
                  {pageSize}
                </option>
              ))}
            </select>
          </div>

          <div className="records_range_container">
            <span>Showing&nbsp;</span>
            <strong>
              {recordsRangeFirst} - {recordsRangeLast} of {rowCount}
            </strong>
          </div>

          <span className="page_range_container">
            <span>&nbsp;Page&nbsp;</span>
            <strong>
              {pageIndex} of {pageCount}
              &nbsp;
            </strong>
          </span>

          <div className="pagination_btn_container">
            <button
              title="First Page"
              className="pagination_btn"
              disabled={!table.getCanPreviousPage()}
              onClick={() => table.setPageIndex(0)}
            >
              <TableFirstPageIcon />
            </button>
            <button
              title="Previous Page"
              className="pagination_btn"
              disabled={!table.getCanPreviousPage()}
              onClick={() => table.previousPage()}
            >
              <TablePreviousPageIcon />
            </button>
            <button
              title="Next Page"
              className="pagination_btn"
              disabled={!table.getCanNextPage()}
              onClick={() => table.nextPage()}
            >
              <TableNextPageIcon />
            </button>
            <button
              title="Last Page"
              className="pagination_btn"
              disabled={!table.getCanNextPage()}
              onClick={() => table.setPageIndex(pageCount - 1)}
            >
              <TableLastPageIcon />
            </button>
          </div>
        </>
      ) : (
        <>
          <div className="rows_per_page_container">
            {/* <span>Rows Per Page&nbsp;:&nbsp;</span> */}
            <select
              value={table.getState().pagination.pageSize}
              onChange={(e) => {
                table.setPageSize(Number(e.target.value));
              }}
            >
              {rowsPerPageArray.map((pageSize) => (
                <option key={pageSize} value={pageSize}>
                  {pageSize}
                </option>
              ))}
            </select>
          </div>

          <div className="records_range_container">
            {/* <span>Showing&nbsp;</span> */}
            <strong>
              {recordsRangeFirst} - {recordsRangeLast} of {rowCount}
            </strong>
          </div>

          <div className="pagination_btn_container">
            <button
              title="Previous Page"
              className="pagination_btn"
              disabled={!table.getCanPreviousPage()}
              onClick={() => table.previousPage()}
            >
              <TablePreviousPageIcon />
            </button>
            <button
              title="Next Page"
              className="pagination_btn"
              disabled={!table.getCanNextPage()}
              onClick={() => table.nextPage()}
            >
              <TableNextPageIcon />
            </button>
          </div>
        </>
      )}
    </div>
  );
}

export default DefaultPagination;