"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireDefault(require("react"));

var _box = _interopRequireDefault(require("../box"));

var _typography = require("../typography");

var _uiIcons = require("@teamleader/ui-icons");

var _classnames = _interopRequireDefault(require("classnames"));

var _theme = _interopRequireDefault(require("./theme.css"));

var _excluded = ["className", "currentPage", "maxNumPagesVisible", "numPages", "children"];

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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);

  if (numPages < 2) {
    return null;
  }

  var classNames = (0, _classnames.default)(_theme.default['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.default.createElement(_box.default, (0, _extends2.default)({
    "data-teamleader-ui": "pagination",
    className: classNames,
    element: "nav"
  }, others), /*#__PURE__*/_react.default.createElement("ul", {
    className: _theme.default['list']
  }, /*#__PURE__*/_react.default.createElement("li", {
    className: (0, _classnames.default)(_theme.default['list-item'], _theme.default['list-item__arrowed'])
  }, children({
    number: currentPage - 1,
    isActive: currentPage === 1,
    icon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconChevronLeftMediumOutline, null),
    iconPlacement: 'left'
  })), iterator.map(function (page, index) {
    var isActive = page === currentPage;
    var isEllipsis = firstEllipsisIndex === index || secondEllipsisIndex === index;
    return /*#__PURE__*/_react.default.createElement("li", {
      key: page,
      className: _theme.default['list-item']
    }, isEllipsis ? /*#__PURE__*/_react.default.createElement(_typography.TextBody, {
      className: _theme.default['ellipsis'],
      element: "span"
    }, "...") : children({
      number: page,
      text: String(page),
      isActive: isActive,
      className: isActive ? _theme.default['is-current'] : ''
    }));
  }), /*#__PURE__*/_react.default.createElement("li", {
    className: (0, _classnames.default)(_theme.default['list-item'], _theme.default['list-item__arrowed'])
  }, children({
    number: currentPage + 1,
    isActive: currentPage === numPages,
    icon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconChevronRightMediumOutline, null),
    iconPlacement: 'right'
  }))));
};

var _default = Pagination;
exports.default = _default;