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