"use strict";

exports.__esModule = true;
exports.PageStrip = void 0;
var React = _interopRequireWildcard(require("react"));
var _PaginationCoreSt = require("./PaginationCore.st.css.js");
var _constants = require("./constants");
var _utils = require("./utils");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Pagination/PaginationCore/PageStrip.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); }
class PageStrip extends React.Component {
  constructor() {
    super(...arguments);
    this.responsiveLayoutIsFresh = false;
    this.unmounted = false;
    this.rootNode = void 0;
    this.state = {
      responsiveLayout: null
    };
  }
  componentDidMount() {
    if (this.props.updateResponsiveLayout) {
      // We can't do this in componentWillMount because the caller might need to access DOM here,
      // and SSR wouldn't work.
      this.props.updateResponsiveLayout(() => {
        this.responsiveLayoutIsFresh = false;

        // Even though we register a noop callback for `this.props.updateResponsiveLayout`
        // in `componentWillUnmount`, we cannot guarantee that the user will not hold onto
        // the old callback and invoke it after unmount, which is the reason for checking
        // `this.unmounted`.
        if (!this.unmounted) {
          this.updateLayoutIfNeeded();
        }
      });
    } else {
      this.updateLayoutIfNeeded();
    }
  }
  UNSAFE_componentWillReceiveProps() {
    this.responsiveLayoutIsFresh = false;
  }
  componentDidUpdate() {
    if (!this.props.updateResponsiveLayout) {
      this.updateLayoutIfNeeded();
    }
    this.forceRepaintInMsEdge();
  }
  componentWillUnmount() {
    this.unmounted = true;
    if (this.props.updateResponsiveLayout) {
      this.props.updateResponsiveLayout(() => null);
    }
  }
  render() {
    return /*#__PURE__*/React.createElement("div", {
      ref: el => {
        this.rootNode = el;
      },
      "data-hook": _constants.DataHooks.pageStrip,
      id: this.props.id ? this.props.id + 'pageStrip' : undefined,
      className: (0, _PaginationCoreSt.st)(_PaginationCoreSt.classes.pageStrip, this.props.className),
      "data-aid": "qa-page-strip",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 79,
        columnNumber: 7
      }
    }, /*#__PURE__*/React.createElement("div", {
      className: _PaginationCoreSt.classes.pageStripInner,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 88,
        columnNumber: 9
      }
    }, this.renderLayout(this.getLayout(), false)), this.isResponsive() && /*#__PURE__*/React.createElement("div", {
      className: _PaginationCoreSt.classes.pageStripInner + ' ' + _PaginationCoreSt.classes.pageStripTemplate,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 93,
        columnNumber: 11
      }
    }, this.renderLayout((0, _utils.createResponsiveLayoutTemplate)(this.props), true)));
  }
  forceRepaintInMsEdge() {
    // MS Edge has a glitch that makes page numbers invisible when switching to the preview
    // mode in Santa editor. As a workaround we need to force text re-rendering.
    // Changing font-variant to small-caps should do the trick without actually affecting
    // the appearance of digits.
    if (!this.rootNode) {
      return;
    }
    var inlineStyle = this.rootNode.style;
    inlineStyle.fontVariant = inlineStyle.fontVariant ? '' : 'small-caps';
  }

  // We can't use page numbers as keys, because we might need to render the same page twice
  // for responsive layout. We also can't use index as a key, because React might reuse the
  // node for another page, and keep keyboard focus on it, which we don't want.
  renderLayout(layout, isDummy) {
    var {
      currentPage,
      pageUrl,
      disabled
    } = this.props;
    return layout.map((pageNumber, index) => {
      if (!pageNumber) {
        return /*#__PURE__*/React.createElement("span", {
          key: index,
          className: _PaginationCoreSt.classes.gap,
          __self: this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 130,
            columnNumber: 11
          }
        }, this.props.gapLabel);
      }
      if (pageNumber === currentPage) {
        return /*#__PURE__*/React.createElement("span", {
          key: "".concat(pageNumber, "-").concat(index),
          "data-hook": "".concat(_constants.DataHooks.page, "-").concat(pageNumber, " ").concat(_constants.DataHooks.currentPage),
          "aria-label": "Page ".concat(pageNumber),
          className: _PaginationCoreSt.classes.currentPage,
          __self: this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 138,
            columnNumber: 11
          }
        }, pageNumber);
      }
      if (isDummy) {
        return /*#__PURE__*/React.createElement("a", {
          key: "".concat(pageNumber, "-").concat(index),
          className: (0, _PaginationCoreSt.st)(_PaginationCoreSt.classes.pageButton, {
            disabled
          }),
          __self: this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 151,
            columnNumber: 11
          }
        }, pageNumber);
      }
      return /*#__PURE__*/React.createElement("a", {
        key: "".concat(pageNumber, "-").concat(index),
        "data-hook": "".concat(_constants.DataHooks.page, "-").concat(pageNumber),
        "aria-label": "Page ".concat(pageNumber),
        "aria-disabled": disabled,
        className: (0, _PaginationCoreSt.st)(_PaginationCoreSt.classes.pageButton, {
          disabled
        }),
        tabIndex: disabled || pageUrl ? undefined : 0,
        onClick: disabled ? undefined : e => this.props.onPageClick(e, pageNumber),
        onKeyDown: disabled ? undefined : e => this.props.onPageKeyDown(e, pageNumber),
        href: !disabled && pageUrl ? pageUrl(pageNumber) : undefined,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 161,
          columnNumber: 9
        }
      }, pageNumber);
    });
  }
  isResponsive() {
    return this.props.responsive && this.props.totalPages > 0 && this.props.maxPagesToShow > 1;
  }
  getLayout() {
    if (!this.isResponsive()) {
      return (0, _utils.createStaticLayout)(this.props);
    }
    if (this.state.responsiveLayout) {
      return this.state.responsiveLayout;
    }
    return (0, _utils.createStaticLayout)({
      totalPages: this.props.totalPages,
      currentPage: this.props.currentPage,
      showFirstPage: this.props.showFirstPage,
      showLastPage: this.props.showLastPage,
      // This is pretty arbitrary. 5 is the minimum space required to show the first, current, and last page.
      maxPagesToShow: 5
    });
  }
  updateLayoutIfNeeded() {
    if (!this.isResponsive() || this.responsiveLayoutIsFresh || !this.rootNode) {
      return;
    }
    this.responsiveLayoutIsFresh = true;
    this.setState({
      responsiveLayout: (0, _utils.createResponsiveLayout)({
        container: this.rootNode.children[1],
        totalPages: this.props.totalPages,
        currentPage: this.props.currentPage,
        maxPagesToShow: this.props.maxPagesToShow,
        showFirstPage: this.props.showFirstPage,
        showLastPage: this.props.showLastPage
      })
    });
  }
}
exports.PageStrip = PageStrip;
//# sourceMappingURL=PageStrip.js.map