import * as React from 'react';
import classNames from 'classnames/bind';
import { range } from 'lodash';

import s from './Pagination.module.scss';

const cn = classNames.bind(s);

interface IPaginationProps {
  pagesCount: number;
  currentPage: number;
  color?: string;
  onClick(page: number): any;
}

export const Pagination = ({ color, pagesCount, currentPage = 1, onClick }: IPaginationProps) => {
  let pages = [];
  const lastPage = pagesCount;

  if (pagesCount > 10 && currentPage > 6) {
    const appended = lastPage - currentPage > 4 ? 4 : lastPage - currentPage + 1;

    pages = range(currentPage - 4, currentPage + appended);
  } else if (pagesCount <= 10) {
    pages = range(1, pagesCount + 1);
  } else {
    pages = range(1, 10);
  }

  const displayFirst = !pages.includes(1);
  const displayLast = !pages.includes(lastPage);

  return (
    <div className={s.pagination}>
      <ul className={s.pagination__pages}>
        {displayFirst && (
          <li className={cn(s.pagination__page)}>
            <button
              type="button"
              className={cn(s.pagination__button, `color-${color}`)}
              onClick={() => onClick(1)}
            >
              1
            </button>
          </li>
        )}
        {displayFirst && (
          <li className={cn(s.pagination__page)}>
            <button
              type="button"
              className={cn(s.pagination__button, `color-${color}`)}
              onClick={() => onClick(1)}
            >
              ...
            </button>
          </li>
        )}

        {pages.map((i) => (
          <li key={i} className={cn(s.pagination__page, { selected: i === currentPage })}>
            <button
              type="button"
              className={cn(s.pagination__button, `color-${color}`)}
              onClick={() => onClick(i)}
            >
              {i}
            </button>
          </li>
        ))}
        {displayLast && (
          <li className={cn(s.pagination__page)}>
            <button
              type="button"
              className={cn(s.pagination__button, `color-${color}`)}
              onClick={() => onClick(lastPage)}
            >
              ...
            </button>
          </li>
        )}
        {displayLast && (
          <li className={cn(s.pagination__page)}>
            <button
              type="button"
              className={cn(s.pagination__button, `color-${color}`)}
              onClick={() => onClick(lastPage)}
            >
              {lastPage}
            </button>
          </li>
        )}
      </ul>
    </div>
  );
};