'use client';

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 '@/components/common/CommonImage';
import { fnNum } from '@/types';

interface PaginationProps {
  currentPage: number;
  totalPages: number;
  pageNumbers: number[];
  onPageChange: fnNum;
}

export default function Pagination({
  currentPage,
  totalPages,
  pageNumbers,
  onPageChange,
}: PaginationProps) {
  const [open, setOpen] = useState(false);

  return (
    <Text
      className={`table-bottom-right flex ${
        totalPages > 1 ? 'show' : 'hidden'
      }`}
    >
      <Button
        onClick={() => onPageChange(1)}
        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={() => onPageChange(Math.max(currentPage - 1, 1))}
        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-4 pb-4 w-60 flex flex-wrap justify-center pl-0 pr-0">
          {pageNumbers.map((page) => (
            <Button
              key={page}
              className={`shadow-none pagination-tooltip ${
                currentPage === page ? 'active' : ''
              }`}
              onClick={() => {
                onPageChange(page);
                setOpen(false);
              }}
            >
              {page}
            </Button>
          ))}
        </DropdownMenuContent>
      </DropdownMenu>

      <Button
        onClick={() => onPageChange(Math.min(currentPage + 1, totalPages))}
        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={() => onPageChange(totalPages)}
        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>
  );
}