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