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