"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _PaginationCoreSt = require("./PaginationCore.st.css.js");
var _constants = require("./constants");
var _utils = require("./utils");
var _PageStrip = require("./PageStrip");
var _propsUtils = require("../../utils/propsUtils");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Pagination/PaginationCore/PaginationCore.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var upperCaseFirst = str => str[0].toUpperCase() + str.slice(1);
var ButtonType = /*#__PURE__*/function (ButtonType) {
  ButtonType["Prev"] = "previous";
  ButtonType["Next"] = "next";
  ButtonType["First"] = "first";
  ButtonType["Last"] = "last";
  return ButtonType;
}(ButtonType || {});
class PaginationCore extends React.Component {
  constructor() {
    super(...arguments);
    this.rootNode = void 0;
    this.getMaxPagesToShow = () => {
      if (this.props.maxPagesToShow) {
        return this.props.maxPagesToShow;
      }
      if (this.props.responsive) {
        return 20;
      }
      return 7;
    };
    this.state = {
      pageInputValue: String(this.props.currentPage),
      pageInputHasError: false
    };
    this.handlePageInputChange = e => {
      this.setState({
        pageInputValue: e.target.value,
        pageInputHasError: false
      });
    };
    this.handlePageInputKeyDown = event => {
      // Enter
      if (event.key === 'Enter') {
        var page = Number(this.state.pageInputValue);
        if (page !== this.props.currentPage) {
          if (1 <= page && page <= this.props.totalPages) {
            this.props.onChange && this.props.onChange({
              event,
              page
            });
          } else {
            this.setState({
              pageInputHasError: true
            });
          }
        }
      }
    };
    this.handlePageInputBlur = () => {
      this.setState({
        pageInputValue: String(this.props.currentPage),
        pageInputHasError: false
      });
    };
    this.handlePageClick = (event, page) => {
      this.props.onChange && this.props.onChange({
        event,
        page
      });
    };
    this.handlePageKeyDown = (event, page) => {
      // Enter or Space
      if (event.key === 'Enter' || event.key === 'Space') {
        this.props.onChange && this.props.onChange({
          event,
          page
        });
      }
    };
  }
  updateRootMinWidth() {
    this.rootNode && this.props.paginationMode && (0, _utils.measureAndSetRootMinWidth)(this.rootNode, this.props.paginationMode, this.props.id);
  }
  componentDidMount() {
    this.props.updateResponsiveLayout && this.updateRootMinWidth();
  }
  componentDidUpdate() {
    this.props.updateResponsiveLayout && this.updateRootMinWidth();
  }
  getId() {
    var elementName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
    return (0, _utils.getId)(this.props.id, elementName);
  }
  renderPageStrip() {
    return /*#__PURE__*/React.createElement(_PageStrip.PageStrip, {
      id: this.props.id,
      totalPages: this.props.totalPages || 0,
      currentPage: this.props.currentPage || 0,
      maxPagesToShow: this.getMaxPagesToShow() || 0,
      showFirstPage: !!this.props.showFirstPage,
      showLastPage: !!this.props.showLastPage,
      responsive: !!this.props.responsive,
      pageUrl: this.props.pageUrl,
      gapLabel: this.props.gapLabel || '',
      onPageClick: this.handlePageClick,
      onPageKeyDown: this.handlePageKeyDown,
      updateResponsiveLayout: this.props.updateResponsiveLayout,
      disabled: !!this.props.disabled,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 128,
        columnNumber: 7
      }
    });
  }
  renderPages() {
    switch (this.props.paginationMode) {
      case _constants.PaginationCoreMode.Input:
        return this.renderPageForm();
      case _constants.PaginationCoreMode.Compact:
        return this.renderPageCompact();
      case _constants.PaginationCoreMode.Pages:
      default:
        return this.renderPageStrip();
    }
  }
  renderPageCompact() {
    return /*#__PURE__*/React.createElement("div", {
      "data-hook": _constants.DataHooks.pageCompact,
      id: this.getId('pageCompact'),
      className: _PaginationCoreSt.classes.compact,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 209,
        columnNumber: 7
      }
    }, /*#__PURE__*/React.createElement("span", {
      id: this.getId('currentPage'),
      "data-hook": _constants.DataHooks.currentPage,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 214,
        columnNumber: 9
      }
    }, this.props.currentPage), /*#__PURE__*/React.createElement("span", {
      id: this.getId('slash'),
      className: _PaginationCoreSt.classes.slash,
      "data-hook": _constants.DataHooks.slashLabel,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 217,
        columnNumber: 9
      }
    }, this.props.slashLabel), /*#__PURE__*/React.createElement("span", {
      id: this.getId('totalPages'),
      "data-hook": _constants.DataHooks.totalPages,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 224,
        columnNumber: 9
      }
    }, this.props.totalPages));
  }
  renderPageForm() {
    return /*#__PURE__*/React.createElement("div", {
      "data-hook": _constants.DataHooks.pageForm,
      id: this.getId('pageForm'),
      className: _PaginationCoreSt.classes.pageForm,
      dir: "ltr",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 233,
        columnNumber: 7
      }
    }, /*#__PURE__*/React.createElement("input", {
      id: this.getId('pageInput'),
      "data-hook": _constants.DataHooks.pageInput,
      type: "number",
      className: _PaginationCoreSt.classes.pageInput,
      min: 1,
      max: this.props.totalPages,
      value: this.state.pageInputValue,
      disabled: this.props.disabled,
      onChange: this.handlePageInputChange,
      onKeyDown: this.handlePageInputKeyDown,
      "aria-label": 'Page number, select a number between 1 and ' + this.props.totalPages,
      onBlur: this.handlePageInputBlur,
      style: {
        width: (0, _utils.calculateWidth)(this.props.totalPages)
      },
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 239,
        columnNumber: 9
      }
    }), this.props.showInputModeTotalPages && [/*#__PURE__*/React.createElement("span", {
      key: "slash",
      id: this.getId('slash'),
      className: _PaginationCoreSt.classes.slash,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 258,
        columnNumber: 11
      }
    }, this.props.slashLabel), /*#__PURE__*/React.createElement("span", {
      key: "total-pages",
      id: this.getId('totalPages'),
      "data-hook": _constants.DataHooks.totalPages,
      className: _PaginationCoreSt.classes.totalPages,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 261,
        columnNumber: 11
      }
    }, this.props.totalPages)]);
  }
  renderEmptyButton(type) {
    var btnClass = '';
    switch (type) {
      case ButtonType.Prev:
        {
          btnClass = _PaginationCoreSt.classes.emptyButtonPrevious;
          break;
        }
      case ButtonType.Next:
        {
          btnClass = _PaginationCoreSt.classes.emptyButtonNext;
          break;
        }
      default:
    }
    return /*#__PURE__*/React.createElement("div", {
      "data-hook": _constants.DataHooks[type],
      className: (0, _PaginationCoreSt.st)(_PaginationCoreSt.classes.emptyButton, btnClass),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 289,
        columnNumber: 7
      }
    });
  }
  renderNavButton(type) {
    var {
      currentPage,
      totalPages,
      pageUrl
    } = this.props;
    var disabled = this.props.disabled || (type === ButtonType.First || type === ButtonType.Prev) && (currentPage || 0) <= 1 || (type === ButtonType.Last || type === ButtonType.Next) && (currentPage || 0) >= totalPages;
    var [btnClass, label, page] = {
      [ButtonType.Prev]: [_PaginationCoreSt.classes.navButtonPrevious, this.props.previousLabel, (currentPage || 0) - 1],
      [ButtonType.Next]: [_PaginationCoreSt.classes.navButtonNext, this.props.nextLabel, (currentPage || 0) + 1],
      [ButtonType.First]: [_PaginationCoreSt.classes.navButtonFirst, this.props.firstLabel, 1],
      [ButtonType.Last]: [_PaginationCoreSt.classes.navButtonLast, this.props.lastLabel, totalPages]
    }[type];
    return /*#__PURE__*/React.createElement("a", {
      "data-hook": _constants.DataHooks[type],
      id: this.getId('navButton' + upperCaseFirst(type)),
      className: (0, _PaginationCoreSt.st)(_PaginationCoreSt.classes.navButton, {
        disabled
      }, btnClass),
      "aria-label": upperCaseFirst(type) + ' Page',
      "aria-disabled": disabled,
      tabIndex: disabled || pageUrl ? undefined : 0,
      onClick: disabled ? undefined : event => this.handlePageClick(event, page),
      onKeyDown: disabled ? undefined : event => this.handlePageKeyDown(event, page),
      href: !disabled && pageUrl ? pageUrl(page) : undefined,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 326,
        columnNumber: 7
      }
    }, label);
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    this.setState({
      pageInputValue: String(nextProps.currentPage),
      pageInputHasError: false
    });
  }
  render() {
    var {
      disabled,
      showFirstLastNavButtons,
      showNextLabel,
      showPreviousLabel,
      width,
      style: inlineStyle
    } = this.props;
    var styleStates = {
      disabled,
      error: this.state.pageInputHasError
    };
    return /*#__PURE__*/React.createElement("nav", (0, _extends2.default)({
      ref: el => {
        this.rootNode = el;
      },
      id: this.getId(''),
      "aria-label": "PaginationCore Navigation",
      "aria-disabled": disabled,
      dir: this.props.rtl ? 'rtl' : undefined,
      onClick: this.props.onClick,
      onDoubleClick: this.props.onDoubleClick,
      onMouseEnter: this.props.onMouseEnter,
      onMouseLeave: this.props.onMouseLeave,
      style: inlineStyle || {
        width
      },
      className: (0, _PaginationCoreSt.st)(_PaginationCoreSt.classes.root, styleStates, this.props.className)
    }, (0, _propsUtils.filterDataProps)(this.props), {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 369,
        columnNumber: 7
      }
    }), showFirstLastNavButtons && this.renderNavButton(ButtonType.First), showPreviousLabel ? this.renderNavButton(ButtonType.Prev) : this.renderEmptyButton(ButtonType.Prev), this.renderPages(), showNextLabel ? this.renderNavButton(ButtonType.Next) : this.renderEmptyButton(ButtonType.Next), showFirstLastNavButtons && this.renderNavButton(ButtonType.Last));
  }
}
exports.default = PaginationCore;
PaginationCore.displayName = 'PaginationCore';
PaginationCore.defaultProps = {
  currentPage: 1,
  showFirstLastNavButtons: false,
  showFirstPage: false,
  showLastPage: false,
  showNextLabel: true,
  showPreviousLabel: true,
  responsive: false,
  paginationMode: 'pages',
  showInputModeTotalPages: false,
  disabled: false,
  // dir="rtl" automatically flips the direction of less-than and more-than signs.
  // If we decide to use different labels we need to add conditional logic.
  firstLabel: '<<',
  lastLabel: '>>',
  previousLabel: '<',
  nextLabel: '>',
  gapLabel: '...',
  slashLabel: '\u00A0/\u00A0'
};
//# sourceMappingURL=PaginationCore.js.map