"use client";
import React from "react";
import { useTranslations } from "next-intl";
import {
    ChevronLeft,
    ChevronRight,
    ChevronsLeft,
    ChevronsRight
} from "lucide-react";
import { Button } from "@/components/ui/button";
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue
} from "@/components/ui/select";
import { useDataset } from "@/components/ui/dataset/dataset-provider";

type Props = {
    perPageOptions?: number[];
};

export const DatasetPagination: React.FC<Props> = (props) => {
    const t = useTranslations("dashboard.general.dataset");
    const {
        perPageOptions = [15, 30, 45, 60]
    } = props;

    const {
        table
    } = useDataset();

    return (
        <div className="flex w-full flex-col-reverse items-center justify-between gap-4 overflow-auto p-1 sm:flex-row sm:gap-8">
            <div className="flex flex-col-reverse items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8">
                <div className="flex items-center space-x-2">
                    <p className="text-sm font-medium whitespace-nowrap">{t("rowsPerPage")}</p>

                    <Select
                      value={`${table.getState().pagination.pageSize}`}
                      onValueChange={(value) => {
                        table.setPageSize(Number(value));
                      }}>
                        <SelectTrigger className="h-8 w-[4.5rem] [&[data-size]]:h-8">
                            <SelectValue placeholder={table.getState().pagination.pageSize}></SelectValue>
                        </SelectTrigger>

                        <SelectContent side="top">
                            {perPageOptions.map((perPage) => {
                                return (
                                    <SelectItem
                                      key={perPage}
                                      value={`${perPage}`}>
                                        {perPage}
                                    </SelectItem>
                                );
                            })}
                        </SelectContent>
                    </Select>
                </div>
            </div>

            <div className="flex items-center justify-center text-sm font-medium">
                {table.getPageCount() > 0 && (
                    <React.Fragment>
                        {t("pageOf", {
                            page: table.getState().pagination.pageIndex + 1,
                            total: table.getPageCount()
                        })}
                    </React.Fragment>
                )}
            </div>

            <div className="flex items-center space-x-2">
                <Button
                  className="hidden size-8 lg:flex"
                  variant="outline"
                  size="icon"
                  disabled={!table.getCanPreviousPage()}
                  aria-label={t("pagination.first")}
                  onClick={() => table.setPageIndex(0)}>
                    <ChevronsLeft />
                </Button>

                <Button
                  className="size-8"
                  variant="outline"
                  size="icon"
                  disabled={!table.getCanPreviousPage()}
                  aria-label={t("pagination.previous")}
                  onClick={() => table.previousPage()}>
                    <ChevronLeft />
                </Button>

                <Button
                  className="size-8"
                  variant="outline"
                  size="icon"
                  aria-label={t("pagination.next")}
                  disabled={!table.getCanNextPage()}
                  onClick={() => table.nextPage()}>
                    <ChevronRight />
                </Button>

                <Button
                  className="hidden size-8 lg:flex"
                  variant="outline"
                  size="icon"
                  aria-label={t("pagination.last")}
                  disabled={!table.getCanNextPage()}
                  onClick={() => table.setPageIndex(table.getPageCount())}>
                    <ChevronsRight />
                </Button>
            </div>
        </div>
    );
};