import { useState } from 'react';
import { Text } from '@/components/ui/text';
import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
} from '@/components/ui/dropdown-menu';
import CommonImage from './CommonImage';
import { IColumnConfig, UnknownRecord } from '@/types';

interface PaginationProps {
  columns?: IColumnConfig[];
  currentPage: number;
  totalPages: number;
  handlePaginatedRecords: (
    page: number,
    params?: UnknownRecord,
    columns?: IColumnConfig[],
  ) => void;
}

const generatePagination = (
  currentPage: number,
  totalPages: number,
): number[] => {
  const range: number[] = [];
  for (let i = 1; i <= totalPages; i++) {
    range.push(i);
  }
  return range;
};

export default function Pagination({
  columns,
  currentPage,
  totalPages,
  handlePaginatedRecords,
}: PaginationProps) {
  const [open, setOpen] = useState(false);
  const pageNumbers = generatePagination(currentPage, totalPages || 1);

  return (
    <Text
      className={`table-bottom-right flex ${
        totalPages > 1 ? 'show' : 'hidden'
      }`}
    >
      <Button
        onClick={() => handlePaginatedRecords(1, {}, columns)}
        disabled={currentPage === 1}
        className={`duble-arrow-button left-arrow-button ${
          currentPage === 1 ? 'pointer-events-none hidden' : ''
        }`}
      >
        <CommonImage
          src="/main/right_arrow_duble_icon.webp"
          width={18}
          height={14}
          alt="First"
          classname="right-duble-btn"
        />
      </Button>

      <Button
        onClick={() =>
          handlePaginatedRecords(Math.max(currentPage - 1, 1), {}, columns)
        }
        disabled={currentPage === 1}
        className={`left-arrow-button ${
          currentPage === 1 ? 'pointer-events-none hidden' : ''
        }`}
      >
        <CommonImage
          src="/main/right_arrow_icon.webp"
          width={9}
          height={14}
          alt="Prev"
          classname="right-icon"
        />
      </Button>

      <Button className="count_no_button">{currentPage}</Button>

      <DropdownMenu open={open} onOpenChange={setOpen}>
        <DropdownMenuTrigger asChild>
          <Text className="pagination-more-btn">...</Text>
        </DropdownMenuTrigger>
        <DropdownMenuContent className="DropdownMenulist rounded-md pt-2 pb-2 w-60 flex flex-wrap justify-center pl-0 pr-0 pagination-dropdown-list mb-2">
          {pageNumbers.map((page) => (
            <Button
              key={page}
              className={`shadow-none pagination-tooltip ${
                currentPage === page ? 'active' : ''
              }`}
              onClick={() => {
                handlePaginatedRecords(page, {}, columns);
                setOpen(false);
              }}
            >
              {page}
            </Button>
          ))}
        </DropdownMenuContent>
      </DropdownMenu>

      <Button
        onClick={() =>
          handlePaginatedRecords(
            Math.min(currentPage + 1, totalPages),
            {},
            columns,
          )
        }
        disabled={currentPage === totalPages}
        className={`right-arrow-button ${
          currentPage === totalPages ? 'pointer-events-none hidden' : ''
        }`}
      >
        <CommonImage
          src="/main/right_arrow_icon.webp"
          width={9}
          height={14}
          alt="Next"
          classname="right-arrow-btn"
        />
      </Button>

      <Button
        onClick={() => handlePaginatedRecords(totalPages, {}, columns)}
        disabled={currentPage === totalPages}
        className={`duble-arrow-button right-arrow-button ${
          currentPage === totalPages ? 'pointer-events-none hidden' : ''
        }`}
      >
        <CommonImage
          src="/main/right_arrow_duble_icon.webp"
          width={18}
          height={14}
          alt="Last"
          classname="right-duble-btn"
        />
      </Button>
    </Text>
  );
}