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";
 17import { useEffect } from "react";
 18
 19export function DataTablePagination() {
 20    const { t } = useTranslation();
 21    const { table } = useEntityTableContext();
 22
 23    useEffect(() => {
 24        if (table.getState().pagination.pageIndex === 1) table.setPageIndex(2);
 25    }, [table]);
 26
 27    return (
 28        <div className="flex justify-between items-center p-2 w-full">
 29            {table.options.onRowSelectionChange && (
 30                <div className="flex-1 text-sm text-muted-foreground">
 31                    {table.getFilteredSelectedRowModel().rows.length} {"/"}
 32                    {table.getFilteredRowModel().rows.length} {t("table.selected")}
 33                </div>
 34            )}
 35            <div className="flex justify-between items-center space-x-6 w-full lg:space-x-8">
 36                <div className="flex items-center space-x-2">
 37                    <p className="text-sm font-medium">{t("table.row-per-page")}</p>
 38                    <Select
 39                        value={`${table.getState().pagination.pageSize}`}
 40                        onValueChange={(value) => {
 41                            table.setPageSize(Number(value));
 42                            table.setPageIndex(1);
 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, 50, 100].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() - 1}
 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(1)}
 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}