import { DEFAULT_PAGE_SIZES } from "@/lib/hooks";
import { cn } from "@/lib/utils";
import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/ui";
import { INITIAL_PAGE_INDEX } from "@shared/contexts";
import { Table } from "@tanstack/react-table";
import { t } from "i18next";
import {
  ChevronLeftIcon,
  ChevronRightIcon,
  ChevronsLeftIcon,
  ChevronsRightIcon,
} from "lucide-react";
import { useMemo } from "react";

export type DataTablePaginationProps<TData> = {
  table: Table<TData>;
  className?: string;
  enablePageSizeSelector?: boolean;
  visible?: boolean | "auto";
};

export function DataTablePagination<TData>({
  table,
  className,
  enablePageSizeSelector = true,
  visible = "auto",
}: DataTablePaginationProps<TData>) {
  const isVisible = useMemo(() => visible === true, [visible]);
  const isAuto = useMemo(() => visible === "auto", [visible]);

  if (!isVisible || (isAuto && table.getPageCount() < 1)) {
    return null;
  }

  return (
    <div className={className}>
      <div className='flex-1 text-base text-muted-foreground'>
        {table.getSelectedRowModel().rows.length > 0 && (
          <>
            {t("common.rows_selected_of_total", {
              count: table.getFilteredSelectedRowModel().rows.length,
              total: table.getFilteredRowModel().rows.length,
            })}
          </>
        )}
      </div>

      <div className='flex justify-between space-x-6 lg:space-x-8'>
        {enablePageSizeSelector && (
          <div className='flex items-center space-x-2 grow'>
            <p className='text-sm font-medium'>{t("common.rows_per_page")}</p>

            <Select
              value={`${table.getState().pagination.pageSize}`}
              onValueChange={(value) => {
                table.setPageSize(Number(value));
              }}
            >
              <SelectTrigger className='h-8 w-[70px]'>
                <SelectValue placeholder={table.getState().pagination.pageSize} />
              </SelectTrigger>
              <SelectContent side='top'>
                {DEFAULT_PAGE_SIZES.map((pageSize) => (
                  <SelectItem key={pageSize} value={`${pageSize}`}>
                    {pageSize}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        )}
        <div
          className={cn(
            "flex space-x-2 flex-1",
            enablePageSizeSelector ? "justify-end" : "justify-between"
          )}
        >
          <div className='flex w-[150px] items-center justify-start'>
            <p className='text-sm font-medium '>
              {t("common.num_page_of_total", {
                count: table.getState().pagination.pageIndex + 1,
                total: table.getPageCount(),
              })}
            </p>
          </div>
          <div className='flex items-center space-x-2'>
            <Button
              type='button'
              variant='outline'
              className='hidden w-8 h-8 p-0 lg:flex'
              onClick={() => table.setPageIndex(INITIAL_PAGE_INDEX)}
              disabled={!table.getCanPreviousPage()}
            >
              <span className='sr-only'>{t("common.go_to_first_page")}</span>
              <ChevronsLeftIcon className='w-4 h-4' />
            </Button>
            <Button
              type='button'
              variant='outline'
              className='w-8 h-8 p-0'
              onClick={() => table.previousPage()}
              disabled={!table.getCanPreviousPage()}
            >
              <span className='sr-only'>{t("common.go_to_prev_page")}</span>
              <ChevronLeftIcon className='w-4 h-4' />
            </Button>
            <Button
              type='button'
              variant='outline'
              className='w-8 h-8 p-0'
              onClick={() => table.nextPage()}
              disabled={!table.getCanNextPage()}
            >
              <span className='sr-only'>{t("common.go_to_next_page")}</span>
              <ChevronRightIcon className='w-4 h-4' />
            </Button>
            <Button
              type='button'
              variant='outline'
              className='hidden w-8 h-8 p-0 lg:flex'
              onClick={() => table.setPageIndex(table.getPageCount() + 1)}
              disabled={!table.getCanNextPage()}
            >
              <span className='sr-only'>{t("common.go_to_last_page")}</span>
              <ChevronsRightIcon className='w-4 h-4' />
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}
