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