import React from 'react';
import 'react-dom';
import '../_rollupPluginBabelHelpers-b9ad31fa.js';
import PropTypes from 'prop-types';
import 'styled-components';
import '../key_codes-ff72266d.js';
import '../hooks/useActivify.js';
import '../index-6829ab1f.js';
import '@styled-system/space';
import '@styled-system/color';
import '@styled-system/border';
import '@styled-system/variant';
import '@styled-system/typography';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
import { I as Icon, A as AngleDownIcon } from '../index-fc484d02.js';
import '../overlays/withTooltip.js';

var css_248z = ".Pagination_pagination__1Yi7P {\n  display: flex;\n  align-items: center;\n  margin-right: -8px; }\n\n.Pagination_paginationArrow__30yDm {\n  width: 24px;\n  height: 24px;\n  border-radius: 4px;\n  border: 1px solid #DDD;\n  background-color: #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  color: #333;\n  margin-right: 8px;\n  cursor: pointer;\n  transition: 0.2s ease-out; }\n  .Pagination_paginationArrow__30yDm:hover {\n    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n    transform: translateY(-2px); }\n  .Pagination_paginationArrow__30yDm.Pagination_left__pf8fl {\n    transform: rotate(90deg); }\n    .Pagination_paginationArrow__30yDm.Pagination_left__pf8fl:hover {\n      box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.2);\n      transform: translateY(-2px) rotate(90deg); }\n  .Pagination_paginationArrow__30yDm.Pagination_right__iYRvY {\n    transform: rotate(-90deg); }\n    .Pagination_paginationArrow__30yDm.Pagination_right__iYRvY:hover {\n      box-shadow: -5px 0px 10px rgba(0, 0, 0, 0.2);\n      transform: translateY(-2px) rotate(-90deg); }\n  .Pagination_paginationArrow__30yDm.Pagination_disabled__3U1lo {\n    opacity: 0.3;\n    pointer-events: none; }\n  .Pagination_paginationArrow__30yDm > div {\n    display: flex;\n    align-items: center;\n    justify-content: center; }\n  .Pagination_paginationArrow__30yDm svg {\n    width: 20px;\n    height: 20px; }\n\n.Pagination_paginationButton__1APjg {\n  width: 24px;\n  height: 24px;\n  border-radius: 4px;\n  border: 1px solid #DDD;\n  background-color: #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  color: #333;\n  margin-right: 8px;\n  cursor: pointer;\n  transition: 0.2s ease-out; }\n  .Pagination_paginationButton__1APjg:hover {\n    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n    transform: translateY(-2px); }\n  .Pagination_paginationButton__1APjg.Pagination_active__3alx3 {\n    background-color: #124fa0;\n    border-color: #124fa0;\n    color: #FFF;\n    pointer-events: none; }\n\n.Pagination_paginationSeparator__1BZgn {\n  display: flex; }\n  .Pagination_paginationSeparator__1BZgn .Pagination_paginationDot__2gZMo {\n    width: 4px;\n    height: 4px;\n    background-color: #CCC;\n    border-radius: 8px;\n    margin-right: 4px; }\n    .Pagination_paginationSeparator__1BZgn .Pagination_paginationDot__2gZMo:last-child {\n      margin-right: 8px; }\n";
var styles = {"pagination":"Pagination_pagination__1Yi7P","paginationArrow":"Pagination_paginationArrow__30yDm","left":"Pagination_left__pf8fl","right":"Pagination_right__iYRvY","disabled":"Pagination_disabled__3U1lo","paginationButton":"Pagination_paginationButton__1APjg","active":"Pagination_active__3alx3","paginationSeparator":"Pagination_paginationSeparator__1BZgn","paginationDot":"Pagination_paginationDot__2gZMo"};
styleInject(css_248z);

var renderDots = function renderDots() {
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(styles.paginationSeparator)
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(styles.paginationDot)
  }), /*#__PURE__*/React.createElement("div", {
    className: "".concat(styles.paginationDot)
  }), /*#__PURE__*/React.createElement("div", {
    className: "".concat(styles.paginationDot)
  }));
};
var Pagination = function Pagination(_ref) {
  var className = _ref.className,
    numPages = _ref.numPages,
    page = _ref.page,
    onChange = _ref.onChange,
    prefixClassName = _ref.prefixClassName;
  var NUM_PAGES = numPages;
  var PAGE = page - 1;
  var leftDisabled = PAGE === 0 ? styles.disabled : "";
  var rightDisabled = PAGE === NUM_PAGES - 1 ? styles.disabled : "";
  var visiblePages = Array(NUM_PAGES).fill(0).map(function (page, i) {
    if (i === NUM_PAGES - 1) return 1;
    return Math.abs(PAGE - i) < 6 ? 1 : 0;
  });
  var renderArrow = React.useCallback(function (className, prefixClassName, newPage) {
    return /*#__PURE__*/React.createElement("div", {
      onClick: function onClick() {
        return onChange(newPage);
      },
      className: "".concat(styles.paginationArrow, " ").concat(prefixClassName, "-arrow ").concat(className)
    }, /*#__PURE__*/React.createElement(Icon, {
      src: AngleDownIcon
    }));
  });
  return /*#__PURE__*/React.createElement("div", {
    "data-testid": "pagination",
    className: "".concat(styles.pagination, " ").concat(prefixClassName, " ").concat(className)
  }, renderArrow("".concat(prefixClassName, "-arrow-left ").concat(styles.left, " ").concat(leftDisabled), prefixClassName, page - 1), visiblePages.map(function (page, i) {
    var paginationButtonActive = PAGE === i ? "".concat(styles.active, " ").concat(prefixClassName, "-page-active") : "";
    if (page === 0 && visiblePages[i - 1] !== 0) return renderDots();
    if (page === 0) return null;
    return /*#__PURE__*/React.createElement("div", {
      onClick: function onClick() {
        return onChange(i + 1);
      },
      className: "".concat(styles.paginationButton, " ").concat(paginationButtonActive, " ").concat(prefixClassName, "-page")
    }, i + 1);
  }), renderArrow("".concat(prefixClassName, "-arrow-right ").concat(styles.right, " ").concat(rightDisabled), prefixClassName, page + 1));
};
Pagination.propTypes = {
  /** The classname to be appended to the outermost element */
  className: PropTypes.string,
  /** prefix to be appended to the child elements */
  prefixClassName: PropTypes.string,
  /** On page change callback function */
  onChange: PropTypes.func,
  /** Total number of pages */
  numPages: PropTypes.number,
  /** Current active page of the user */
  page: PropTypes.number
};
Pagination.defaultProps = {
  className: "",
  prefixClassName: "",
  onChange: function onChange() {},
  numPages: 1,
  page: 1
};
Pagination.classNames = {
  $prefix: "Outermost element",
  "$prefix-arrow": "Arrow element in pagination",
  "$prefix-arrow-left": "Left Arrow element in pagination",
  "$prefix-arrow-right": "Right Arrow element in pagination",
  "$prefix-page-active": "Active page element in pagination",
  "$prefix-page": "Page numbers displayed in pagination"
};
Pagination.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Pagination",
  "props": {
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The classname to be appended to the outermost element"
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "prefix to be appended to the child elements"
    },
    "onChange": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "On page change callback function"
    },
    "numPages": {
      "defaultValue": {
        "value": "1",
        "computed": false
      },
      "type": {
        "name": "number"
      },
      "required": false,
      "description": "Total number of pages"
    },
    "page": {
      "defaultValue": {
        "value": "1",
        "computed": false
      },
      "type": {
        "name": "number"
      },
      "required": false,
      "description": "Current active page of the user"
    }
  }
};

export default Pagination;
