"use client";

import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";

import type { Table } from "@tanstack/react-table";

import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

type CustomerTablePaginationProps<TRow> = {
  table: Table<TRow>;
  rowsPerPageId: string;
};

export function CustomerTableRecordsPerPage<TRow>({ table, rowsPerPageId }: CustomerTablePaginationProps<TRow>) {
  const pageSize = table.getState().pagination.pageSize;

  return (
    <div className="flex items-center gap-2">
      <Label htmlFor={rowsPerPageId} className="font-medium text-sm whitespace-nowrap">
        Records per page
      </Label>
      <Select
        value={`${pageSize}`}
        onValueChange={(value) => {
          table.setPageSize(Number(value));
          table.setPageIndex(0);
        }}
      >
        <SelectTrigger className="h-9 w-20" id={rowsPerPageId}>
          <SelectValue placeholder={pageSize} />
        </SelectTrigger>
        <SelectContent side="bottom">
          <SelectGroup>
            {[10, 25, 50, 100].map((size) => (
              <SelectItem key={size} value={`${size}`}>
                {size}
              </SelectItem>
            ))}
          </SelectGroup>
        </SelectContent>
      </Select>
    </div>
  );
}

export function CustomerTablePageNavigation<TRow>({ table }: Pick<CustomerTablePaginationProps<TRow>, "table">) {
  const { pageIndex } = table.getState().pagination;

  return (
    <div className="mb-[15px] flex items-center justify-end gap-4">
      <div className="font-medium text-sm">
        Page {table.getPageCount() === 0 ? 0 : pageIndex + 1} of {table.getPageCount()}
      </div>
      <div className="flex items-center gap-2">
        <Button
          variant="outline"
          className="hidden size-8 sm:flex"
          size="icon"
          onClick={() => table.setPageIndex(0)}
          disabled={!table.getCanPreviousPage()}
        >
          <span className="sr-only">Go to first page</span>
          <ChevronsLeft className="size-4" />
        </Button>
        <Button
          variant="outline"
          className="size-8"
          size="icon"
          onClick={() => table.previousPage()}
          disabled={!table.getCanPreviousPage()}
        >
          <span className="sr-only">Go to previous page</span>
          <ChevronLeft className="size-4" />
        </Button>
        <Button
          variant="outline"
          className="size-8"
          size="icon"
          onClick={() => table.nextPage()}
          disabled={!table.getCanNextPage()}
        >
          <span className="sr-only">Go to next page</span>
          <ChevronRight className="size-4" />
        </Button>
        <Button
          variant="outline"
          className="hidden size-8 sm:flex"
          size="icon"
          onClick={() => table.setPageIndex(table.getPageCount() - 1)}
          disabled={!table.getCanNextPage()}
        >
          <span className="sr-only">Go to last page</span>
          <ChevronsRight className="size-4" />
        </Button>
      </div>
    </div>
  );
}