1import {
  2    ChevronLeftIcon,
  3    ChevronRightIcon,
  4    DoubleArrowLeftIcon,
  5    DoubleArrowRightIcon,
  6} from "@radix-ui/react-icons"
  7import { Table } from "@tanstack/react-table"
  8import { cn } from "@marzneshin/utils"
  9import {
 10    Button,
 11    Select,
 12    SelectContent,
 13    SelectItem,
 14    SelectTrigger,
 15    SelectValue,
 16} from "@marzneshin/components"
 17import { useTranslation } from "react-i18next"
 18
 19interface DataTablePaginationProps<TData> {
 20    table: Table<TData>
 21    disableSelected?: boolean
 22}
 23
 24export function DataTablePagination<TData>({
 25    table, disableSelected
 26}: DataTablePaginationProps<TData>) {
 27    const { t } = useTranslation();
 28    return (
 29        <div className={cn("flex items-center p-2 w-full", disableSelected && "justify-between")}>
 30            {disableSelected || (
 31                <div className="flex-1 text-sm text-muted-foreground">
 32                    {table.getFilteredSelectedRowModel().rows.length} {"/"}
 33                    {table.getFilteredRowModel().rows.length} {t('table.selected')}
 34                </div>
 35            )}
 36            <div className="flex items-center space-x-6 lg:space-x-8 w-full justify-between">
 37                <div className="flex items-center space-x-2">
 38                    <p className="text-sm font-medium">{t('table.row-per-page')}</p>
 39                    <Select
 40                        value={`${table.getState().pagination.pageSize}`}
 41                        onValueChange={(value) => {
 42                            table.setPageSize(Number(value))
 43                        }}
 44                    >
 45                        <SelectTrigger className="h-8 w-[70px]">
 46                            <SelectValue placeholder={table.getState().pagination.pageSize} />
 47                        </SelectTrigger>
 48                        <SelectContent side="top">
 49                            {[10, 20, 30, 40, 50].map((pageSize) => (
 50                                <SelectItem key={pageSize} value={`${pageSize}`}>
 51                                    {pageSize}
 52                                </SelectItem>
 53                            ))}
 54                        </SelectContent>
 55                    </Select>
 56                </div>
 57                <div className="flex justify-center items-center text-sm font-medium w-[100px]">
 58                    Page {table.getState().pagination.pageIndex + 1} of{" "}
 59                    {table.getPageCount()}
 60                </div>
 61                <div className="flex items-center space-x-2">
 62                    <Button
 63                        variant="outline"
 64                        className="hidden p-0 w-8 h-8 lg:flex"
 65                        onClick={() => table.setPageIndex(0)}
 66                        disabled={!table.getCanPreviousPage()}
 67                    >
 68                        <span className="sr-only">Go to first page</span>
 69                        <DoubleArrowLeftIcon className="w-4 h-4" />
 70                    </Button>
 71                    <Button
 72                        variant="outline"
 73                        className="p-0 w-8 h-8"
 74                        onClick={() => table.previousPage()}
 75                        disabled={!table.getCanPreviousPage()}
 76                    >
 77                        <span className="sr-only">Go to previous page</span>
 78                        <ChevronLeftIcon className="w-4 h-4" />
 79                    </Button>
 80                    <Button
 81                        variant="outline"
 82                        className="p-0 w-8 h-8"
 83                        onClick={() => table.nextPage()}
 84                        disabled={!table.getCanNextPage()}
 85                    >
 86                        <span className="sr-only">Go to next page</span>
 87                        <ChevronRightIcon className="w-4 h-4" />
 88                    </Button>
 89                    <Button
 90                        variant="outline"
 91                        className="hidden p-0 w-8 h-8 lg:flex"
 92                        onClick={() => table.setPageIndex(table.getPageCount() - 1)}
 93                        disabled={!table.getCanNextPage()}
 94                    >
 95                        <span className="sr-only">Go to last page</span>
 96                        <DoubleArrowRightIcon className="w-4 h-4" />
 97                    </Button>
 98                </div>
 99            </div>
100        </div>
101    )
102}