"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Pagination = Pagination;
exports.default = void 0;
var _react = require("react");
var _Button = _interopRequireDefault(require("../Button/Button"));
var _Ellipses = _interopRequireDefault(require("./Ellipses"));
var _Page = _interopRequireDefault(require("./Page"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Icons = require("../Icons");
var _i18n = require("../i18n");
var _useId = _interopRequireDefault(require("../utilities/useId"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
// Determines number of pages visible to either side of active page.
const overflow = 1;

// Determines total number of visible pages without Ellipses.
const maxVisiblePages = 7;
function paginationBuilder(page, pages) {
  const paginationRange = [];
  let start = page - overflow;
  let end = page + overflow;
  const availableSlots = maxVisiblePages - 2;

  /**
   * If the current page is < `maxVisiblePages`,
   * add 1 - 5 pages.
   */
  if (page < availableSlots) {
    start = 1;
    end = availableSlots;
  }

  /**
   * If the current page equals `pages` - 1,
   * make sure `start` begins one page earlier.
   */
  if (page === pages - 2) {
    start -= 1;
    end += 1;
  }

  /**
   * If `end` page is two from the end,
   * make sure the last page shows instead of ellipsis.
   */
  if (end === pages - 2) {
    end += 1;
  }

  /**
   * If `end` > `pages`,
   * add last pages to `paginationRange[]`.
   */
  if (end >= pages) {
    start = pages - (availableSlots - 1);
    end = pages;
  }

  /**
   * If `pages` is 5 or fewer,
   * all pages added to `paginationRange[]`
   */
  if (pages <= maxVisiblePages) {
    start = 1;
    end = pages;
  }
  for (let i = start; i <= end; i++) {
    paginationRange.push(i);
  }
  return paginationRange;
}

/**
 * For information about how and when to use this component,
 * [refer to its full documentation page](https://design.cms.gov/components/pagination/).
 */
function Pagination(_ref) {
  let {
    ariaLabel,
    className,
    compact,
    currentPage,
    renderHref,
    onPageChange,
    headingLevel,
    isNavigationHidden,
    startLabelText,
    startAriaLabel,
    endLabelText,
    endAriaLabel,
    totalPages,
    ...rest
  } = _ref;
  const classes = (0, _classnames.default)('ds-c-pagination', {
    'ds-c-pagination--compact': compact
  }, className);

  /**
   * `useState` and `useEffect` determine if
   * mobile layout of component is rendered.
   */

  const pageChange = (0, _react.useCallback)(page => evt => onPageChange(evt, page), [onPageChange]);
  const pages = [];

  /**
   * If `compact` is true, don't run code to populate `pages[]`.
   */
  if (!compact) {
    const pageRange = paginationBuilder(currentPage, totalPages);
    if (pageRange[0] >= 2) {
      /**
       * If `pageRange` begins with a page of 2 or greater,
       * begin Pagination with Page 1
       */
      pages.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Page.default, {
        href: renderHref(1),
        index: 1,
        isActive: currentPage === 1,
        onPageChange: pageChange(1)
      }, "page-1"));

      /**
       * If `pageRange` doesn't equal 2, second Pagination element is Ellipses,
       * otherwise page count continues.
       */
      if (pageRange[0] !== 2) {
        pages.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ellipses.default, {}, "ellipses-1"));
      }
    }

    /**
     * Renders all Page components in range (3 pages) to Pagination component.
     */

    pageRange.forEach(page => {
      pages.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Page.default, {
        href: renderHref(page),
        index: page,
        isActive: currentPage === page,
        onPageChange: pageChange(page)
      }, `page-${page}`));
    });

    /**
     * Defines if/when the Ellipses component appears
     * at the end of the Pagination component -
     * as long as there are fewer than 7 pages.
     */
    if (currentPage <= totalPages - 3 && totalPages > maxVisiblePages) {
      if (currentPage < totalPages - 3) {
        pages.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ellipses.default, {}, "ellipses-2"));
      }
      pages.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Page.default, {
        href: renderHref(totalPages),
        index: totalPages,
        isActive: currentPage === totalPages,
        onPageChange: pageChange(totalPages)
      }, `page-${totalPages}`));
    }
  }
  const startIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.ArrowIcon, {
    direction: "left",
    className: "ds-c-pagination__nav--image"
  });
  const endIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.ArrowIcon, {
    direction: "right",
    className: "ds-c-pagination__nav--image"
  });
  const Heading = `h${headingLevel}`;
  const headingId = (0, _useId.default)('pagination-heading--', rest.id && `${rest.id}__pagination-heading`);
  const headingElement = /*#__PURE__*/(0, _jsxRuntime.jsxs)(Heading, {
    id: headingId,
    children: [ariaLabel ?? (0, _i18n.t)('pagination.ariaLabel'), " -", ' ', (0, _i18n.t)('pagination.pageXOfY', {
      number: `${currentPage}`,
      total: `${totalPages}`
    })]
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("nav", {
    className: classes,
    "aria-labelledby": headingId,
    ...rest,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      className: "ds-u-visibility--screen-reader",
      children: headingElement
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
      variation: "ghost",
      href: renderHref(currentPage - 1),
      onClick: pageChange(currentPage - 1),
      "aria-label": startAriaLabel ?? (0, _i18n.t)('pagination.startAriaLabel'),
      className: "ds-c-pagination__nav",
      disabled: currentPage === 1,
      style: {
        visibility: currentPage === 1 && isNavigationHidden ? 'hidden' : 'visible'
      },
      "aria-hidden": currentPage === 1 ? isNavigationHidden : false,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        className: "ds-c-pagination__nav--img-container ds-c-pagination__nav--img-container-previous",
        children: startIcon
      }), startLabelText ?? (0, _i18n.t)('pagination.startLabelText')]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      className: "ds-c-pagination__page-count",
      dangerouslySetInnerHTML: {
        __html: (0, _i18n.t)('pagination.pageXOfY', {
          number: `<strong>${currentPage}</strong>`,
          total: `<strong>${totalPages}</strong>`
        })
      }
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "ds-c-pagination__pages",
      children: pages
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
      variation: "ghost",
      href: renderHref(currentPage + 1),
      onClick: pageChange(currentPage + 1),
      "aria-label": endAriaLabel ?? (0, _i18n.t)('pagination.endAriaLabel'),
      className: "ds-c-pagination__nav",
      disabled: currentPage === totalPages,
      style: {
        visibility: currentPage === totalPages && isNavigationHidden ? 'hidden' : 'visible'
      },
      "aria-hidden": currentPage === totalPages ? isNavigationHidden : false,
      children: [endLabelText ?? (0, _i18n.t)('pagination.endLabelText'), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        className: "ds-c-pagination__nav--img-container ds-c-pagination__nav--img-container-next",
        children: endIcon
      })]
    })]
  });
}
Pagination.defaultProps = {
  compact: false,
  headingLevel: '2',
  isNavigationHidden: false
};
var _default = exports.default = Pagination;