import React, { useEffect, useContext } from 'react';
import PropTypes from 'prop-types';
import { MdLastPage } from '@react-icons/all-files/md/MdLastPage';
import { MdFirstPage } from '@react-icons/all-files/md/MdFirstPage';
import { MdChevronRight } from '@react-icons/all-files/md/MdChevronRight';
import { MdChevronLeft } from '@react-icons/all-files/md/MdChevronLeft';

import { translate } from '~helpers/getters';
import Link from '~hooks/link';
import { Context } from '~context/MainProvider';
import styles from './pagination-with-midpoints.module.scss';

const PaginationWithMidPoints = ({
  currentPage = 1,
  pagePath = '#',
  totalPages = 5,
  previousComp = <MdChevronLeft title="Left-pointing Arrow Icon" />,
  nextComp = <MdChevronRight title="Right-pointing Arrow Icon" />,
  firstComp = <MdFirstPage title="Left-pointing Arrow to First Page Icon" />,
  lastComp = <MdLastPage title="Right-pointing Arrow to Last Page Icon" />,
  anchorLabel,
}) => {
  const { translations } = useContext(Context) || {};
  const current = Number(currentPage);
  const total = Number(totalPages);
  function getPagePath(index) {
    return (
      (index === 1
        ? pagePath
        : `${pagePath}/${translate(translations, 'archive_page_path', 'page')}/${index}`) +
      (anchorLabel ? `#${anchorLabel}` : '')
    );
  }

  const midPage = (a, b) => Math.ceil((a + b) / 2);
  const firstMidPage = midPage(0, current);
  const lastMidPage = midPage(total, current);

  useEffect(() => {
    const hash = window?.location?.hash?.replace('#', '');
    document?.getElementById(hash)?.scrollIntoView();
  });

  return (
    <ul className={styles.pagination || ''}>
      {/* got to first page */}
      <li className={styles.showInAll || ''}>
        {current > 1 ? (
          <Link
            to={getPagePath(1)}
            className={`${styles.button || ''} ${styles.isActive || ''} pagination-gtm`}
            aria-label={translate(translations, 'archive_go_to_first_page', 'Go to first page')}
          >
            {firstComp}
          </Link>
        ) : (
          <span className={styles.button || ''}>{firstComp}</span>
        )}
      </li>
      {/* previous button */}
      <li className={styles.showInAll || ''}>
        {current > 1 ? (
          <Link
            to={getPagePath(current - 1)}
            className={`${styles.button || ''} ${styles.isActive || ''} pagination-gtm`}
            aria-label={translate(translations, 'archive_previous_button', 'Previous Button')}
          >
            {previousComp}
          </Link>
        ) : (
          <span className={styles.button || ''}>{previousComp}</span>
        )}
      </li>

      <li>
        <ul className={styles.padd || ''}>
          {/* first page link */}
          {current !== 1 && (
            <li>
              <Link to={getPagePath(1)} className="pagination-gtm">
                1
              </Link>
              {current > 4 && <span>...</span>}
            </li>
          )}
          {/* first mid page link */}
          {current > 3 && (
            <li>
              <Link to={getPagePath(firstMidPage)} className="pagination-gtm">
                {firstMidPage}
              </Link>
              {firstMidPage < current - 2 && <span>...</span>}
            </li>
          )}
          {/* current page -1 link */}
          {current > 2 && (
            <li>
              <Link to={getPagePath(current - 1)} className="pagination-gtm">
                {current - 1}
              </Link>
            </li>
          )}
          {/* current page link */}
          <li className={styles.showInAll || ''}>
            <Link to={getPagePath(current)} className={`${styles.active || ''} pagination-gtm`}>
              {current}
            </Link>
          </li>
          {/* current page +1 link */}
          {current < total - 1 && (
            <li>
              <Link to={getPagePath(current + 1)} className="pagination-gtm">
                {current + 1}
              </Link>
            </li>
          )}
          {/* last mid page link */}
          {current < total - 3 && (
            <li>
              {lastMidPage > current + 2 && <span>...</span>}
              <Link to={getPagePath(lastMidPage)} className="pagination-gtm">
                {lastMidPage}
              </Link>
            </li>
          )}
          {/* last page link */}
          {current !== total && (
            <li>
              {current < total - 2 && <span>...</span>}
              <Link to={getPagePath(total)} className="pagination-gtm">
                {total}
              </Link>
            </li>
          )}
          <li className={styles.showInMobile || ''}>
            <span>{translate(translations, 'of', 'of')}</span>
            <Link to={getPagePath(total)} className="pagination-gtm">
              {total}
            </Link>
          </li>
        </ul>
      </li>

      {/* next button */}
      <li className={styles.showInAll || ''}>
        {current < total ? (
          <Link
            to={getPagePath(current + 1)}
            className={`${styles.button || ''} ${styles.isActive || ''} pagination-gtm`}
            aria-label={translate(translations, 'archive_next_button', 'Next Button')}
          >
            {nextComp}
          </Link>
        ) : (
          <span className={styles.button || ''}>{nextComp}</span>
        )}
      </li>
      {/* got to last page */}
      <li className={styles.showInAll || ''}>
        {current !== total ? (
          <Link
            to={getPagePath(total)}
            className={`${styles.button || ''} ${styles.isActive || ''} pagination-gtm`}
            aria-label={translate(translations, 'archive_go_to_last_page', 'Go to Last')}
          >
            {lastComp}
          </Link>
        ) : (
          <span className={styles.button || ''}>{lastComp}</span>
        )}
      </li>
    </ul>
  );
};

PaginationWithMidPoints.propTypes = {
  currentPage: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
  pagePath: PropTypes.string.isRequired,
  totalPages: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
  nextComp: PropTypes.oneOfType([PropTypes.element, PropTypes.any]),
  previousComp: PropTypes.oneOfType([PropTypes.element, PropTypes.any]),
  firstComp: PropTypes.oneOfType([PropTypes.element, PropTypes.any]),
  lastComp: PropTypes.oneOfType([PropTypes.element, PropTypes.any]),
  anchorLabel: PropTypes.string,
};

export default PaginationWithMidPoints;
