import React from 'react';
import {
  StyledContainer,
  StyledContentWrapper,
  // StyledDropdown,
  StyledInfoBox,
  StyledLabel,
  StyledPaginationItem,
  StyledPaginationWrapper,
  // StyledDropdownData,
} from './PaginationStyle';
import PrevIcon from '../../../assets/icons/PrevIcon';
import NextIcon from '../../../assets/icons/NextIcon';
import { useAtom } from 'jotai';
import { Select } from 'antd';
import { filtersReducerAtom } from '../header-filters/filterStore';

const PAGE_SIZE_OPTIONS = [50, 100, 150];

const MAX_PAGES_TO_SHOW = 5;

const Pagination: React.FC<any> = ({
  currentPage,
  totalItems,
  itemsPerPage,
  onPageChange,
  onItemsPerPageChange,
}) => {
  const [, dispatch] = useAtom(filtersReducerAtom);

  const totalPages = Math.ceil(totalItems / itemsPerPage);
  const startItem = (currentPage - 1) * itemsPerPage + 1;
  const endItem = Math.min(currentPage * itemsPerPage, totalItems);

  const handlePageChange = (page: number) => {
    if (page >= 1 && page <= totalPages) {
      dispatch({
        type: 'SET_PAGE',
        payload: page,
      });

      onPageChange(page);
    }
  };

  const handleItemsPerPageChange = (value: number) => {
    const newItemsPerPage = value;
    dispatch({
      type: 'SET_PERPAGE',
      payload: newItemsPerPage,
    });

    // Reset to the first page
    dispatch({
      type: 'SET_PAGE',
      payload: 1,
    });

    onPageChange(1);
    onItemsPerPageChange(newItemsPerPage);
  };

  const getPageNumbers = (
    currentPage: number,
    totalPages: number
  ): number[] => {
    const pageNumbers: number[] = [1]; // Always show the first page

    if (currentPage > MAX_PAGES_TO_SHOW / 2 + 1) {
      pageNumbers.push(-1); // Ellipsis
    }

    const startPage = Math.max(
      2,
      Math.min(currentPage - 1, totalPages - MAX_PAGES_TO_SHOW + 2)
    );
    const endPage = Math.min(startPage + MAX_PAGES_TO_SHOW - 3, totalPages - 1);
    for (let i = startPage; i <= endPage; i++) {
      pageNumbers.push(i);
    }

    if (currentPage < totalPages - MAX_PAGES_TO_SHOW / 2 - 1) {
      pageNumbers.push(-1); // Ellipsis
    }

    if (totalPages > 1) {
      pageNumbers.push(totalPages); // Always show the last page
    }

    return pageNumbers;
  };

  return (
    <StyledContainer>
      <StyledContentWrapper>
        <StyledInfoBox>
          Showing {startItem}-{endItem} from {totalItems}
        </StyledInfoBox>
        <StyledLabel>Row on Page</StyledLabel>
        <Select
          value={itemsPerPage}
          onChange={handleItemsPerPageChange}
          style={{ width: 75 }}
        >
          {PAGE_SIZE_OPTIONS.map(option => (
            <Select.Option key={option} value={option}>
              {option}
            </Select.Option>
          ))}
        </Select>
        <StyledPaginationWrapper>
          <StyledPaginationItem
            onClick={() => handlePageChange(currentPage - 1)}
          >
            <PrevIcon />
          </StyledPaginationItem>
          {getPageNumbers(currentPage, totalPages).map((pageNumber, index) => (
            <StyledPaginationItem
              key={index}
              active={pageNumber === currentPage}
              onClick={() => handlePageChange(pageNumber)}
            >
              {pageNumber === -1 ? '...' : pageNumber}
            </StyledPaginationItem>
          ))}
          <StyledPaginationItem
            onClick={() => handlePageChange(currentPage + 1)}
          >
            <NextIcon />
          </StyledPaginationItem>
        </StyledPaginationWrapper>
      </StyledContentWrapper>
    </StyledContainer>
  );
};

export default Pagination;
