import React from 'react';

import { PaginationContainer } from '../../styles/components/shared/PaginationContainer.style';
import { Link } from '../../i18n';

export interface PaginationProps {
  href: string;
  as: string;
  currentPage: number;
  totalPages: number;
}

const Pagination: React.FC<PaginationProps> = ({ href, as, currentPage, totalPages }) => {
  const nextPage: number = currentPage + 1;
  const previousPage: number = currentPage - 1;

  const item = (index: number | string, disabled: boolean, page: number, content: string | JSX.Element): JSX.Element => (
    <li className={currentPage === page && 'current'} key={`${page}-${index}`}>
      {disabled ?
        content :
        <Link href={`${href}${page}`} as={`${as}${page}`}>
          <a>
            {content}
          </a>
        </Link>
      }
    </li>
  );

  const renderPreviousPage = (): JSX.Element => item(
    'first',
    currentPage === 1,
    previousPage,
    <i className="fas fa-chevron-left" />
  );

  const renderNextPage = (): JSX.Element => item(
    'last',
    currentPage >= totalPages,
    nextPage,
    <i className="fas fa-chevron-right" />
  );

  const renderPaginator = (): JSX.Element[] => {
    const numberPage = totalPages;
    const maxShow = numberPage - 1;
    const result = [];
    let jump: boolean;
    for (let i = 1; i <= Math.ceil(numberPage); i += 1) {
      const isCurrentPage = i === currentPage;
      if (isCurrentPage || i < 2 || i > maxShow || i === nextPage || i === previousPage) {
        jump = false;
        result.push(
          item(i, isCurrentPage, i, i.toString())
        );
      } else {
        if (!jump) {
          jump = true;
          result.push(
            item(i, true, 0, '...')
          );
        }
      }
    }

    return result;
  };

  return (
    <PaginationContainer>
      <ul>
        {renderPreviousPage()}
        {renderPaginator()}
        {renderNextPage()}
      </ul>
    </PaginationContainer>
  );
};

export default Pagination;