import searchStyles from 'src/components/blocks/searchResults/searchResults.module.css';

interface SearchResult_PaginationProps {
  postsPerPage: number;
  totalPosts: number;
  paginate: any;
  paginatePrevious: any;
  paginateNext: any;
  currentPage: any;
}

export default function SearchResults_Pagination(props: SearchResult_PaginationProps) {
  let postsPerPage = props.postsPerPage;
  let totalPosts = props.totalPosts;
  let paginate = props.paginate;
  let paginatePrevious = props.paginatePrevious;
  let paginateNext = props.paginateNext;
  let currentPage = props.currentPage;
  let btnClassName: string;
  let btnPreviousClassName = searchStyles.showingResults_PaginationBtn_DisplayNone;
  let btnNextClassName = searchStyles.showingResults_PaginationNext;

  // ================================================================ //
  // Determine how many Pages are needed / Create Page Numbers Array //
  // ================================================================ //
  const pageNumbers = [];
  for(let i =1; i <= Math.ceil(totalPosts / postsPerPage); i++) {
    pageNumbers.push(i);
  }

  // ================================================================ //
  // Number Buttons: ClassName //
  // ================================================================ //
  const getNumberBtn_ClassName = (number: number) => {
    if(currentPage === number) {
      btnClassName = searchStyles.showingResults_Pagination_CurrentNumberLink
    } else {
      btnClassName = searchStyles.showingResults_Pagination_NumberLink
    }
  }
  
  // ================================================================ //
  // Previous Button: ClassName // 
  // ================================================================ //
  const getPreviousBtn_ClassName = () => {
    // Display: None if First Page //
    if(currentPage > 1) {
      btnPreviousClassName = searchStyles.showingResults_PaginationPrevious
    } else {
      btnPreviousClassName = searchStyles.showingResults_PaginationBtn_DisplayNone
    }

    // Display: None if Search Has No Posts //
    if(totalPosts == 0) {
      btnPreviousClassName = searchStyles.showingResults_PaginationBtn_DisplayNone
    }
  }
  {getPreviousBtn_ClassName()}
  
  // ================================================================ //
  // Next Button: ClassName // 
  // ================================================================ //
  const getNextBtn_ClassName = () => {
    // Display: None if Last Page //
    if(currentPage < pageNumbers.length) {
      btnNextClassName = searchStyles.showingResults_PaginationNext
    } else {
      btnNextClassName = searchStyles.showingResults_PaginationBtn_DisplayNone
    }
  }
  {getNextBtn_ClassName()}

  return(
    <div className={searchStyles.showingResults_Pagination_Ctn}>

      {/* ================================================================
      // Btn: Previous Page // 
      ================================================================ */}
      <div className={btnPreviousClassName}>
        <a onClick={() => paginatePrevious()} href='?#'>
          Previous
        </a>
      </div>

      {/* ================================================================
      // Btn: Page Numbers // 
      ================================================================ */}
      {pageNumbers.map(number => (
        <div key={number} className={searchStyles.showingResults_Pagination_NumberLink_Ctn} >
          {/* Get the ClassName for this Button - Default ClassName OR Current Page ClassName */}
          {getNumberBtn_ClassName(number)}

          <a onClick={() => paginate(number)} className={btnClassName}>
            {number}
          </a>

        </div>
      ))}

      {/* ================================================================
      // Btn: Next Page // 
      ================================================================ */}
      <div className={btnNextClassName}>
        <a onClick={() => paginateNext()} href='?#'>
          Next
        </a>
      </div>

    </div>
  )
};