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 w-full lg:space-x-8">
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                            table.setPageIndex(1)
38                        }}
39                    >
40                        <SelectTrigger className="h-8 w-[70px]">
41                            <SelectValue placeholder={table.getState().pagination.pageSize} />
42                        </SelectTrigger>
43                        <SelectContent side="top">
44                            {[10, 20, 50, 100].map((pageSize) => (
45                                <SelectItem key={pageSize} value={`${pageSize}`}>
46                                    {pageSize}
47                                </SelectItem>
48                            ))}
49                        </SelectContent>
50                    </Select>
51                </div>
52                <div className="flex justify-center items-center text-sm font-medium w-[100px]">
53                    Page {table.getState().pagination.pageIndex + 1} of{" "}
54                    {table.getPageCount() - 1}
55                </div>
56                <div className="flex items-center space-x-2">
57                    <Button
58                        variant="outline"
59                        className="hidden p-0 w-8 h-8 lg:flex"
60                        onClick={() => table.setPageIndex(1)}
61                        disabled={!table.getCanPreviousPage()}
62                    >
63                        <span className="sr-only">Go to first page</span>
64                        <DoubleArrowLeftIcon className="w-4 h-4" />
65                    </Button>
66                    <Button
67                        variant="outline"
68                        className="p-0 w-8 h-8"
69                        onClick={() => table.previousPage()}
70                        disabled={!table.getCanPreviousPage()}
71                    >
72                        <span className="sr-only">Go to previous page</span>
73                        <ChevronLeftIcon className="w-4 h-4" />
74                    </Button>
75                    <Button
76                        variant="outline"
77                        className="p-0 w-8 h-8"
78                        onClick={() => table.nextPage()}
79                        disabled={!table.getCanNextPage()}
80                    >
81                        <span className="sr-only">Go to next page</span>
82                        <ChevronRightIcon className="w-4 h-4" />
83                    </Button>
84                    <Button
85                        variant="outline"
86                        className="hidden p-0 w-8 h-8 lg:flex"
87                        onClick={() => table.setPageIndex(table.getPageCount() - 1)}
88                        disabled={!table.getCanNextPage()}
89                    >
90                        <span className="sr-only">Go to last page</span>
91                        <DoubleArrowRightIcon className="w-4 h-4" />
92                    </Button>
93                </div>
94            </div>
95        </div>
96    )
97}