"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Pagination = void 0;
var _InputBase2 = _interopRequireDefault(require("@mui/material/InputBase"));
var _styled = _interopRequireDefault(require("@emotion/styled"));
var _react = require("react");
var _Box = require("../Box.cjs");
var _Button = require("../Buttons/Button.cjs");
var _i18n = require("../i18n.generated/i18n.cjs");
var _index = require("../icons.generated/index.cjs");
var _OdysseyDesignTokensContext = require("../OdysseyDesignTokensContext.cjs");
var _Typography = require("../Typography.cjs");
var _usePagination = require("./usePagination.cjs");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/*!
 * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
 * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
 *
 * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *
 * See the License for the specific language governing permissions and limitations under the License.
 */

const PaginationContainer = (0, _styled.default)("nav")({
  display: "flex",
  justifyContent: "space-between"
});
const PaginationSegment = (0, _styled.default)("div", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
})(({
  odysseyDesignTokens
}) => ({
  display: "flex",
  alignItems: "center",
  gap: odysseyDesignTokens.Spacing4,
  "& > div": {
    display: "flex",
    alignItems: "center",
    gap: odysseyDesignTokens.Spacing2
  }
}));
const PaginationInput = (0, _styled.default)(_InputBase2.default, {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
})(({
  odysseyDesignTokens
}) => ({
  borderColor: odysseyDesignTokens.HueNeutral200,
  borderRadius: odysseyDesignTokens.BorderRadiusTight,
  height: odysseyDesignTokens.Spacing6,
  width: "4.5714285714rem",
  "&:hover": {
    borderColor: odysseyDesignTokens.HueNeutral400
  },
  "&.Mui-focused:hover": {
    borderColor: odysseyDesignTokens.PalettePrimaryMain
  }
}));
const PaginationButtonContainer = (0, _styled.default)("div")({
  "& > *": {
    marginInlineStart: `0 !important`
  }
});
const Pagination = ({
  currentPageLabel: currentPageLabelProp,
  currentRowsCount,
  hasPageInput = true,
  hasRowCountInput = true,
  hasRowCountLabel = true,
  isDisabled,
  isMoreDisabled,
  lastRow,
  loadMoreLabel: loadMoreLabelProp,
  maxPageIndex,
  maxPageSize,
  nextLabel: nextLabelProp,
  onPaginationChange: onPaginationChangeProp,
  pageIndex,
  pageSize,
  previousLabel: previousLabelProp,
  rowsPerPageLabel: rowsPerPageLabelProp,
  totalRows,
  variant
}) => {
  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
  const {
    t
  } = (0, _i18n.useTranslation)();
  const [page, setPage] = (0, _react.useState)(pageIndex);
  const [rowsPerPage, setRowsPerPage] = (0, _react.useState)(pageSize);
  const initialRowsPerPage = (0, _react.useRef)(pageSize);
  const currentPageLabel = currentPageLabelProp ?? t("pagination.page");
  const loadMoreLabel = loadMoreLabelProp ?? t("pagination.loadmore");
  const nextLabel = nextLabelProp ?? t("pagination.next");
  const previousLabel = previousLabelProp ?? t("pagination.previous");
  const rowsPerPageLabel = rowsPerPageLabelProp ?? t("pagination.rowsperpage");
  (0, _react.useEffect)(() => {
    setPage(pageIndex);
    setRowsPerPage(pageSize);
  }, [pageIndex, pageSize]);
  const onPaginationChange = (0, _react.useCallback)(({
    pageIndex,
    pageSize
  }) => {
    onPaginationChangeProp({
      pageIndex,
      pageSize
    });
  }, [onPaginationChangeProp]);
  const {
    totalRowsLabel
  } = (0, _usePagination.usePagination)({
    pageIndex,
    pageSize,
    currentRowsCount: currentRowsCount || 0,
    totalRows
  });
  const handlePaginationChange = (0, _react.useCallback)(() => {
    let updatedPage = page;
    let updatedRowsPerPage = rowsPerPage;
    if (totalRows) {
      const maxPageIndex = Math.ceil(totalRows / updatedRowsPerPage);
      if (updatedRowsPerPage > totalRows) {
        updatedRowsPerPage = totalRows;
      }
      if (updatedPage > maxPageIndex) {
        updatedPage = maxPageIndex;
      } else if (updatedPage < 1) {
        updatedPage = 1;
      }
    }
    onPaginationChange({
      pageIndex: updatedPage,
      pageSize: updatedRowsPerPage
    });
  }, [page, rowsPerPage, onPaginationChange, totalRows]);
  const handlePageSubmit = (0, _react.useCallback)(event => {
    if (event.key === "Enter") {
      onPaginationChange({
        pageIndex: Number(event.currentTarget.value),
        pageSize: rowsPerPage
      });
    }
  }, [rowsPerPage, onPaginationChange]);
  const handleRowsPerPageSubmit = (0, _react.useCallback)(event => {
    if (event.key === "Enter") {
      onPaginationChange({
        pageIndex: page,
        pageSize: Number(event.currentTarget.value)
      });
    }
  }, [page, onPaginationChange]);
  const setPageFromEvent = (0, _react.useCallback)(event => {
    const value = maxPageIndex ? Math.min(Number(event.target.value), maxPageIndex) : Number(event.target.value);
    setPage(Math.max(1, value));
  }, [setPage, maxPageIndex]);
  const setRowsPerPageFromEvent = (0, _react.useCallback)(event => {
    const value = maxPageSize ? Math.min(Number(event.target.value), maxPageSize) : Number(event.target.value);
    setRowsPerPage(Math.max(1, value));
  }, [setRowsPerPage, maxPageSize]);
  const handleLoadMore = (0, _react.useCallback)(() => {
    onPaginationChange({
      pageIndex: 1,
      pageSize: rowsPerPage + initialRowsPerPage.current
    });
  }, [rowsPerPage, onPaginationChange]);
  const handleNextButton = (0, _react.useCallback)(() => {
    onPaginationChange({
      pageIndex: page + 1,
      pageSize: rowsPerPage
    });
  }, [onPaginationChange, page, rowsPerPage]);
  const handlePreviousButton = (0, _react.useCallback)(() => {
    onPaginationChange({
      pageIndex: page - 1,
      pageSize: rowsPerPage
    });
  }, [onPaginationChange, page, rowsPerPage]);
  const loadMoreIsDisabled = (0, _react.useMemo)(() => {
    return isMoreDisabled || (totalRows ? rowsPerPage >= totalRows : false);
  }, [isMoreDisabled, rowsPerPage, totalRows]);
  const nextButtonDisabled = (0, _react.useMemo)(() => isMoreDisabled || lastRow && (totalRows ? lastRow >= totalRows : false) || isDisabled, [isMoreDisabled, totalRows, lastRow, isDisabled]);
  const previousButtonDisabled = (0, _react.useMemo)(() => pageIndex <= 1 || isDisabled, [pageIndex, isDisabled]);
  const rowsPerPageInputProps = (0, _react.useMemo)(() => ({
    "aria-label": rowsPerPageLabel,
    max: maxPageSize || totalRows
  }), [maxPageSize, rowsPerPageLabel, totalRows]);
  const currentPageInputProps = (0, _react.useMemo)(() => ({
    "aria-label": currentPageLabel,
    max: maxPageIndex
  }), [currentPageLabel, maxPageIndex]);
  return variant === "paged" ? (0, _jsxRuntime.jsxs)(PaginationContainer, {
    "aria-label": t("pagination.label"),
    children: [(0, _jsxRuntime.jsxs)(PaginationSegment, {
      odysseyDesignTokens: odysseyDesignTokens,
      children: [hasRowCountInput && (0, _jsxRuntime.jsxs)(_Box.Box, {
        children: [(0, _jsxRuntime.jsx)(_Typography.Paragraph, {
          color: "textSecondary",
          component: "span",
          children: rowsPerPageLabel
        }), (0, _jsxRuntime.jsx)(PaginationInput, {
          disabled: isDisabled,
          inputProps: rowsPerPageInputProps,
          odysseyDesignTokens: odysseyDesignTokens,
          onBlur: handlePaginationChange,
          onChange: setRowsPerPageFromEvent,
          onKeyDown: handleRowsPerPageSubmit,
          type: "number",
          value: rowsPerPage
        })]
      }), hasRowCountLabel && (0, _jsxRuntime.jsx)(_Typography.Paragraph, {
        color: "textSecondary",
        component: "span",
        children: totalRowsLabel
      })]
    }), (0, _jsxRuntime.jsxs)(PaginationSegment, {
      odysseyDesignTokens: odysseyDesignTokens,
      children: [totalRows && hasPageInput && (0, _jsxRuntime.jsxs)(_Box.Box, {
        children: [(0, _jsxRuntime.jsx)(_Typography.Paragraph, {
          color: "textSecondary",
          component: "span",
          children: currentPageLabel
        }), (0, _jsxRuntime.jsx)(PaginationInput, {
          disabled: isDisabled,
          inputProps: currentPageInputProps,
          odysseyDesignTokens: odysseyDesignTokens,
          onBlur: handlePaginationChange,
          onChange: setPageFromEvent,
          onKeyDown: handlePageSubmit,
          type: "number",
          value: page
        })]
      }), (0, _jsxRuntime.jsxs)(PaginationButtonContainer, {
        children: [(0, _jsxRuntime.jsx)(_Button.Button, {
          ariaLabel: previousLabel,
          isDisabled: previousButtonDisabled,
          onClick: handlePreviousButton,
          size: "small",
          startIcon: (0, _jsxRuntime.jsx)(_index.ArrowLeftIcon, {}),
          variant: "floating"
        }), (0, _jsxRuntime.jsx)(_Button.Button, {
          ariaLabel: nextLabel,
          endIcon: (0, _jsxRuntime.jsx)(_index.ArrowRightIcon, {}),
          isDisabled: nextButtonDisabled,
          onClick: handleNextButton,
          size: "small",
          variant: "floating"
        })]
      })]
    })]
  }) : (0, _jsxRuntime.jsx)(_Button.Button, {
    isDisabled: loadMoreIsDisabled,
    label: loadMoreLabel,
    onClick: handleLoadMore,
    variant: "secondary"
  });
};
const MemoizedPagination = exports.Pagination = (0, _react.memo)(Pagination);
MemoizedPagination.displayName = "Pagination";
//# sourceMappingURL=Pagination.cjs.map