import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["className", "currentPage", "maxNumPagesVisible", "numPages", "children"];
import React from 'react';
import Box from '../box';
import { TextBody } from '../typography';
import { IconChevronLeftMediumOutline, IconChevronRightMediumOutline } from '@teamleader/ui-icons';
import cx from 'classnames';
import theme from './theme.css';

var Pagination = function Pagination(_ref) {
  var className = _ref.className,
      _ref$currentPage = _ref.currentPage,
      currentPage = _ref$currentPage === void 0 ? 1 : _ref$currentPage,
      _ref$maxNumPagesVisib = _ref.maxNumPagesVisible,
      maxNumPagesVisible = _ref$maxNumPagesVisib === void 0 ? 7 : _ref$maxNumPagesVisib,
      numPages = _ref.numPages,
      children = _ref.children,
      others = _objectWithoutProperties(_ref, _excluded);

  if (numPages < 2) {
    return null;
  }

  var classNames = cx(theme['pagination'], className);
  var iterator = [currentPage];
  var counter = 0;

  while (iterator.length < maxNumPagesVisible && iterator.length < numPages) {
    if (counter % 2 === 0 && iterator[0] !== 1) {
      iterator.unshift(iterator[0] - 1);
    } else if (counter % 2 === 1 && iterator[iterator.length - 1] !== numPages) {
      iterator.push(iterator[iterator.length - 1] + 1);
    }

    counter++;
  } // make sure the first and the last item are the first and the last page


  iterator[0] = 1;
  iterator[iterator.length - 1] = numPages; // should we replace the 2nd and 2nd last by ellipsis?

  var firstEllipsisIndex = null;
  var secondEllipsisIndex = null;

  if (iterator.length > 1 && iterator[1] !== 2) {
    firstEllipsisIndex = 1;
  }

  if (iterator.length > 1 && iterator[iterator.length - 2] !== numPages - 1) {
    secondEllipsisIndex = iterator.length - 2;
  }

  return /*#__PURE__*/React.createElement(Box, _extends({
    "data-teamleader-ui": "pagination",
    className: classNames,
    element: "nav"
  }, others), /*#__PURE__*/React.createElement("ul", {
    className: theme['list']
  }, /*#__PURE__*/React.createElement("li", {
    className: cx(theme['list-item'], theme['list-item__arrowed'])
  }, children({
    number: currentPage - 1,
    isActive: currentPage === 1,
    icon: /*#__PURE__*/React.createElement(IconChevronLeftMediumOutline, null),
    iconPlacement: 'left'
  })), iterator.map(function (page, index) {
    var isActive = page === currentPage;
    var isEllipsis = firstEllipsisIndex === index || secondEllipsisIndex === index;
    return /*#__PURE__*/React.createElement("li", {
      key: page,
      className: theme['list-item']
    }, isEllipsis ? /*#__PURE__*/React.createElement(TextBody, {
      className: theme['ellipsis'],
      element: "span"
    }, "...") : children({
      number: page,
      text: String(page),
      isActive: isActive,
      className: isActive ? theme['is-current'] : ''
    }));
  }), /*#__PURE__*/React.createElement("li", {
    className: cx(theme['list-item'], theme['list-item__arrowed'])
  }, children({
    number: currentPage + 1,
    isActive: currentPage === numPages,
    icon: /*#__PURE__*/React.createElement(IconChevronRightMediumOutline, null),
    iconPlacement: 'right'
  }))));
};

export default Pagination;