import clsx from "clsx"
import type { JSX } from "react"
import { Select } from "../../selection"
import { PAGE_SIZE_OPTIONS } from "./constants"
import type { OffsetPaginationProps } from "./OffsetPagination.types"
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "./Pagination"
import { useOffsetPagination } from "./useOffsetPagination"

export const OffsetPagination = ({
  currentPage,
  totalPages,
  totalItems,
  pageSize,
  onPageChange,
  onPageSizeChange,
  pageSizeOptions = PAGE_SIZE_OPTIONS,
  className,
  selectedRows = 0,
  totalRows = 0,
  nextBtnText = "",
  prevBtnText = "",
}: OffsetPaginationProps): JSX.Element => {
  const {
    pageNumbers,
    handlePageChange,
    handlePageSizeChange,
    handlePreviousPage,
    handleNextPage,
    isPreviousDisabled,
    isNextDisabled,
  } = useOffsetPagination({
    currentPage,
    totalPages,
    totalItems,
    pageSize,
    onPageChange,
    onPageSizeChange,
    pageSizeOptions,
    selectedRows,
    totalRows,
  })

  return (
    <div className={clsx("flex items-center justify-start gap-2 select-none", className)}>
      <Pagination className="items-center">
        <PaginationContent className="gap-2 items-center">
          <PaginationItem>
            <PaginationPrevious
              disabled={isPreviousDisabled}
              onClick={!isPreviousDisabled ? handlePreviousPage : undefined}
              text={prevBtnText}
            />
          </PaginationItem>
          {pageNumbers.map((page, idx) => (
            <PaginationItem key={typeof page === "number" ? page : `ellipsis-${idx}`}>
              {page === "ellipsis" ? (
                <PaginationEllipsis />
              ) : (
                <PaginationLink
                  size="2"
                  isActive={page === currentPage}
                  onClick={page !== currentPage ? () => handlePageChange(Number(page)) : undefined}
                >
                  {page}
                </PaginationLink>
              )}
            </PaginationItem>
          ))}
          <PaginationItem>
            <PaginationNext
              disabled={isNextDisabled}
              text={nextBtnText}
              onClick={!isNextDisabled ? handleNextPage : undefined}
            />
          </PaginationItem>
        </PaginationContent>
      </Pagination>

      {onPageSizeChange && (
        <Select.Root
          value={pageSize.toString()}
          onValueChange={value => handlePageSizeChange(Number(value))}
        >
          <Select.Trigger className="!cursor-pointer !gap-4" />
          <Select.Content>
            <Select.Group>
              {pageSizeOptions.map(size => (
                <Select.Item key={size} value={size.toString()} className="!cursor-pointer">
                  {`${size} / page`}
                </Select.Item>
              ))}
            </Select.Group>
          </Select.Content>
        </Select.Root>
      )}
    </div>
  )
}