var _excluded = ["activePage", "menuRef", "onSelect", "pages"];
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
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 { StyledOverlay } from './Pagination.styles';
var noop = function noop() {};
var PaginationMenu = /*#__PURE__*/React.forwardRef(function PaginationMenu(_ref, ref) {
  var activePage = _ref.activePage,
    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);
  return /*#__PURE__*/React.createElement(StyledOverlay, {
    ref: ref,
    shadowStrength: 2
  }, /*#__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);

  // 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();
  }
  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$current10;
      e.preventDefault();
      (_menuRef$current10 = menuRef.current) === null || _menuRef$current10 === void 0 ? void 0 : _menuRef$current10.select(e);
    }
  }
  return /*#__PURE__*/React.createElement(OverlayTrigger, _extends({
    role: "listbox",
    passA11yPropsToOverlay: true,
    autoFocus: true,
    afterShow: afterShow,
    overlay: /*#__PURE__*/React.createElement(PaginationMenu, {
      activePage: activePage,
      menuRef: menuRef,
      onSelect: onSelect,
      pages: pages
    }),
    placement: "bottom-left",
    ref: ref,
    trigger: "click"
  }, props), /*#__PURE__*/React.createElement(DropdownButton, {
    "aria-labelledby": ariaLabelledby,
    arrow: true,
    disabled: disabled,
    id: id,
    onKeyDown: onKeyDown,
    variant: "tertiary"
  }, activePage));
});
//# sourceMappingURL=PaginationSelect.js.map