var _excluded = ["activePage", "maxHeight", "menuRef", "onSelect", "pages"];
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
import { times } from 'ramda';
import React from 'react';
import { DropdownButton } from '../Dropdown/Dropdown';
import { MenuImperative } from '../MenuImperative/MenuImperative';
import { OverlayTrigger, useOverlayTriggerContext } from '../OverlayTrigger/OverlayTrigger';
import { mergeRefs } from '../_utils/mergeRefs';
import { StyledOverlay } from './Pagination.styles';
var noop = function noop() {};
var DEFAULT_MAX_HEIGHT = 300;
var VIEWPORT_PADDING = 16;
function computeAvailableHeight(triggerEl) {
  if (!triggerEl) {
    return DEFAULT_MAX_HEIGHT;
  }
  var rect = triggerEl.getBoundingClientRect();
  var viewportHeight = window.innerHeight;
  var spaceBelow = viewportHeight - rect.bottom - VIEWPORT_PADDING;
  var spaceAbove = rect.top - VIEWPORT_PADDING;
  var availableSpace = Math.max(spaceBelow, spaceAbove);
  return Math.min(DEFAULT_MAX_HEIGHT, availableSpace);
}
var PaginationMenu = /*#__PURE__*/React.forwardRef(function PaginationMenu(_ref, ref) {
  var activePage = _ref.activePage,
    maxHeight = _ref.maxHeight,
    menuRef = _ref.menuRef,
    _ref$onSelect = _ref.onSelect,
    onSelect_ = _ref$onSelect === void 0 ? noop : _ref$onSelect,
    pages = _ref.pages,
    props = _objectWithoutProperties(_ref, _excluded);
  var ctx = useOverlayTriggerContext();
  var lastItemRef = React.useRef(null);
  var hasFooter = pages > 10;
  React.useEffect(function () {
    var _menuRef$current;
    (_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 ? void 0 : _menuRef$current.highlightFirst();
  }, [menuRef]);
  React.useEffect(function () {
    var _menuRef$current2, _menuRef$current3;
    (_menuRef$current2 = menuRef.current) === null || _menuRef$current2 === void 0 ? void 0 : _menuRef$current2.highlightSuggested();
    (_menuRef$current3 = menuRef.current) === null || _menuRef$current3 === void 0 ? void 0 : _menuRef$current3.highlightSelected();
  }, [menuRef]);
  function onKeyDown(event) {
    var _menuRef$current4;
    var currentPage = (_menuRef$current4 = menuRef.current) === null || _menuRef$current4 === void 0 ? void 0 : _menuRef$current4.highlighted();
    if (event.key === 'ArrowDown' || event.key === 'Down') {
      // when on the second to last item, want to jump to the last item (in the footer)
      if (currentPage === pages - 1 && lastItemRef.current) {
        var _menuRef$current5;
        (_menuRef$current5 = menuRef.current) === null || _menuRef$current5 === void 0 ? void 0 : _menuRef$current5.highlight(lastItemRef.current);
      }
    } else if (event.key === 'ArrowUp' || event.key === 'Up') {
      // on the last item (in the footer), want to jump back to the second to last
      // item back in the menu
      if (hasFooter && currentPage === pages) {
        var _menuRef$current6;
        event.stopPropagation();
        (_menuRef$current6 = menuRef.current) === null || _menuRef$current6 === void 0 ? void 0 : _menuRef$current6.highlightLast();
      }
    }
  }
  function onSelect(selection) {
    onSelect_(selection);
    ctx.hide(selection.event);
  }
  var children = times(function (index) {
    var page = index + 1;
    return /*#__PURE__*/React.createElement(MenuImperative.Item, {
      item: page,
      key: index,
      selected: page === activePage,
      ref: lastItemRef
    }, page);
  }, pages);
  var overlayStyle = maxHeight ? {
    maxHeight: maxHeight
  } : undefined;
  return /*#__PURE__*/React.createElement(StyledOverlay, {
    ref: ref,
    shadowStrength: 2,
    style: overlayStyle
  }, /*#__PURE__*/React.createElement(MenuImperative, _extends({
    circular: true
  }, props, {
    ref: menuRef,
    onKeyDown: onKeyDown,
    onSelect: onSelect
  }), hasFooter ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MenuImperative.Options, null, children.slice(0, -1)), /*#__PURE__*/React.createElement(MenuImperative.Footer, {
    padding: "xs none"
  }, children[children.length - 1])) : /*#__PURE__*/React.createElement(MenuImperative.Options, null, children)));
});
export var PaginationSelect = /*#__PURE__*/React.forwardRef(function PaginationSelect(_ref2, ref) {
  var _ref2$activePage = _ref2.activePage,
    activePage = _ref2$activePage === void 0 ? 1 : _ref2$activePage,
    ariaLabelledby = _ref2["aria-labelledby"],
    disabled = _ref2.disabled,
    id = _ref2.id,
    onSelect = _ref2.onSelect,
    _ref2$pages = _ref2.pages,
    pages = _ref2$pages === void 0 ? 0 : _ref2$pages,
    props = _objectWithoutProperties(_ref2, ["activePage", "aria-labelledby", "disabled", "id", "onSelect", "pages"]);
  var menuRef = React.useRef(null);
  var triggerRef = React.useRef(null);
  var _React$useState = React.useState(undefined),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    maxHeight = _React$useState2[0],
    setMaxHeight = _React$useState2[1];
  var _React$useState3 = React.useState(false),
    _React$useState4 = _slicedToArray(_React$useState3, 2),
    isOpen = _React$useState4[0],
    setIsOpen = _React$useState4[1];

  // Recompute height on viewport resize
  React.useEffect(function () {
    if (!isOpen) return;
    function handleResize() {
      setMaxHeight(computeAvailableHeight(triggerRef.current));
    }
    window.addEventListener('resize', handleResize);
    return function () {
      return window.removeEventListener('resize', handleResize);
    };
  }, [isOpen]);

  // Safari has an issue with giving focus to buttons after clicking on them
  // if the button or menu do not have focus, the keyboard navigation does not work,
  // so just focus the menu when we open it
  function afterShow() {
    var _menuRef$current7, _menuRef$current7$el, _menuRef$current7$el$;
    // this is brittle, if MenuImperative dom structure changes this could break
    // but super specific to pagination, not really a concern elsewhere
    ;
    (_menuRef$current7 = menuRef.current) === null || _menuRef$current7 === void 0 ? void 0 : (_menuRef$current7$el = _menuRef$current7.el) === null || _menuRef$current7$el === void 0 ? void 0 : (_menuRef$current7$el$ = _menuRef$current7$el.firstChild) === null || _menuRef$current7$el$ === void 0 ? void 0 : _menuRef$current7$el$.focus();

    // Compute available height
    setIsOpen(true);
    setMaxHeight(computeAvailableHeight(triggerRef.current));
  }
  function afterHide() {
    setIsOpen(false);
    setMaxHeight(undefined);
  }
  function onKeyDown(e) {
    if (e.key === 'Up' || e.key === 'ArrowUp') {
      var _menuRef$current8;
      e.preventDefault();
      (_menuRef$current8 = menuRef.current) === null || _menuRef$current8 === void 0 ? void 0 : _menuRef$current8.prev();
    } else if (e.key === 'Down' || e.key === 'ArrowDown') {
      var _menuRef$current9;
      e.preventDefault();
      (_menuRef$current9 = menuRef.current) === null || _menuRef$current9 === void 0 ? void 0 : _menuRef$current9.next();
    } else if (e.key === 'Enter') {
      var _menuRef$current0;
      e.preventDefault();
      (_menuRef$current0 = menuRef.current) === null || _menuRef$current0 === void 0 ? void 0 : _menuRef$current0.select(e);
    }
  }
  return /*#__PURE__*/React.createElement(OverlayTrigger, _extends({
    role: "listbox",
    passA11yPropsToOverlay: true,
    autoFocus: true,
    afterShow: afterShow,
    afterHide: afterHide,
    overlay: /*#__PURE__*/React.createElement(PaginationMenu, {
      activePage: activePage,
      maxHeight: maxHeight,
      menuRef: menuRef,
      onSelect: onSelect,
      pages: pages
    }),
    placement: "bottom-left",
    ref: mergeRefs(ref, triggerRef),
    trigger: "click"
  }, props), /*#__PURE__*/React.createElement(DropdownButton, {
    "aria-labelledby": ariaLabelledby,
    arrow: true,
    disabled: disabled,
    id: id,
    onKeyDown: onKeyDown,
    role: "combobox",
    variant: "tertiary"
  }, activePage));
});
//# sourceMappingURL=PaginationSelect.js.map