import { Table } from "@tanstack/react-table";
import { TableFirstPageIcon, TableLastPageIcon } from "../../../../assets/svg";
import NavigateBeforeRounded from "@mui/icons-material/NavigateBeforeRounded";
import NavigateNextRounded from "@mui/icons-material/NavigateNextRounded";
import { MenuItem, Typography } from "@mui/material";
import { CraftTablePaginationProps } from "../../../types/table";
import {
  PaginationContainer,
  GoToPageContainer,
  RowsPerPageContainer,
  RecordsRangeContainer,
  PageRangeContainer,
  PaginationButtons,
  PaginationButton,
  RowsPerPageSelect,
  GoToPageInput,
} from "./pagination.styles";

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);

  const isFullView = paginationOptions?.paginationView === "full";

  return (
    <PaginationContainer>
      {isFullView && (
        <GoToPageContainer>
          <Typography variant="body2" fontSize={14} mr={1}>
            Go to page:
          </Typography>
          <GoToPageInput
            defaultValue={pageIndex}
            type="number"
            inputProps={{
              name: "pagination-size",
              min: 1,
              max: pageCount,
            }}
            onKeyDown={(e) => {
              if (e.key === "Enter") {
                const page = e.currentTarget.value
                  ? Number(e.currentTarget.value) - 1
                  : 0;
                table.setPageIndex(page);
              }
            }}
          />
        </GoToPageContainer>
      )}

      <RowsPerPageContainer>
        {isFullView && (
          <Typography variant="body2" fontSize={14} mr={1}>
            Rows per page:
          </Typography>
        )}
        <RowsPerPageSelect
          value={pageSize}
          onChange={(e) => table.setPageSize(Number(e.target.value))}
        >
          {rowsPerPageArray.map((size) => (
            <MenuItem key={size} value={size} sx={{ fontSize: 12 }}>
              {size}
            </MenuItem>
          ))}
        </RowsPerPageSelect>
      </RowsPerPageContainer>

      <RecordsRangeContainer>
        <strong>
          {recordsRangeFirst} – {recordsRangeLast} of {rowCount}
        </strong>
      </RecordsRangeContainer>

      {isFullView && (
        <PageRangeContainer>
          <strong>
            Page {pageIndex} of {pageCount}
          </strong>
        </PageRangeContainer>
      )}

      <PaginationButtons>
        {isFullView && (
          <PaginationButton
            title="First Page"
            disabled={!table.getCanPreviousPage()}
            onClick={() => table.setPageIndex(0)}
          >
            <TableFirstPageIcon />
          </PaginationButton>
        )}

        <PaginationButton
          title="Previous Page"
          disabled={!table.getCanPreviousPage()}
          onClick={() => table.previousPage()}
        >
          <NavigateBeforeRounded fontSize="small" />
        </PaginationButton>

        <PaginationButton
          title="Next Page"
          disabled={!table.getCanNextPage()}
          onClick={() => table.nextPage()}
        >
          <NavigateNextRounded fontSize="small" />
        </PaginationButton>

        {isFullView && (
          <PaginationButton
            title="Last Page"
            disabled={!table.getCanNextPage()}
            onClick={() => table.setPageIndex(pageCount - 1)}
          >
            <TableLastPageIcon />
          </PaginationButton>
        )}
      </PaginationButtons>
    </PaginationContainer>
  );
}

export default DefaultPagination;