"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CardLayoutContent = void 0;
var _styled = _interopRequireDefault(require("@emotion/styled"));
var _react = require("react");
var _Box = require("../../Box.cjs");
var _CircularProgress = require("../../CircularProgress.cjs");
var _OdysseyDesignTokensContext = require("../../OdysseyDesignTokensContext.cjs");
var _DataCard = require("./DataCard.cjs");
var _RowActions = require("./RowActions.cjs");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/*!
 * Copyright (c) 2024-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 StackContainer = (0, _styled.default)("div", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "currentLayout" && prop !== "maxGridColumns"
})(({
  odysseyDesignTokens,
  currentLayout,
  maxGridColumns
}) => ({
  display: currentLayout === "list" ? "flex" : "grid",
  flexDirection: "column",
  columnGap: odysseyDesignTokens.Spacing5,
  ...(currentLayout === "grid" && {
    [`@media (max-width: 720px)`]: {
      gridTemplateColumns: "repeat(1, 1fr)"
    },
    [`@media (min-width: 720px) and (max-width: 960px)`]: {
      gridTemplateColumns: "repeat(2, 1fr)"
    },
    [`@media (min-width: 960px)`]: {
      gridTemplateColumns: `repeat(${maxGridColumns}, 1fr)`
    }
  })
}));
const LoadingContainer = (0, _styled.default)("div", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
})(({
  odysseyDesignTokens
}) => ({
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  width: "100%",
  paddingBlock: odysseyDesignTokens.Spacing5
}));
const RowDataCard = ({
  cardLayoutOptions,
  currentIndex,
  handleRowSelectionChange,
  hasRowReordering,
  hasRowSelection,
  isRowReorderingDisabled,
  onReorderRows,
  row,
  rowReorderingUtilities,
  rowSelection,
  totalRows
}) => {
  const {
    overline,
    title,
    description,
    image,
    children,
    variant
  } = cardLayoutOptions.itemProps(row);
  const onSelectionChange = (0, _react.useCallback)(() => handleRowSelectionChange(row), [handleRowSelectionChange, row]);
  const detailPanel = (0, _react.useMemo)(() => cardLayoutOptions.renderDetailPanel?.({
    row
  }), [cardLayoutOptions, row]);
  const menuButtonChildren = (0, _react.useMemo)(() => cardLayoutOptions.rowActionMenuItems || hasRowReordering ? (0, _jsxRuntime.jsx)(_RowActions.RowActions, {
    isRowReorderingDisabled: isRowReorderingDisabled,
    row: row,
    rowActionMenuItems: cardLayoutOptions.rowActionMenuItems,
    rowIndex: currentIndex,
    totalRows: totalRows,
    updateRowOrder: hasRowReordering && onReorderRows ? rowReorderingUtilities.updateRowOrder : undefined
  }) : null, [cardLayoutOptions.rowActionMenuItems, currentIndex, hasRowReordering, isRowReorderingDisabled, onReorderRows, row, rowReorderingUtilities, totalRows]);
  return (0, _jsxRuntime.jsx)(_DataCard.DataCard, {
    children: children,
    description: description,
    detailPanel: detailPanel,
    hasSelection: hasRowSelection,
    image: image,
    isSelected: rowSelection[row.id] ?? false,
    menuButtonChildren: menuButtonChildren,
    onSelectionChange: onSelectionChange,
    overline: overline,
    title: title,
    variant: variant
  }, row.id);
};
const MemoizedRowDataCard = (0, _react.memo)(RowDataCard);
MemoizedRowDataCard.displayName = "RowDataCard";
const CardLayoutContent = ({
  currentLayout,
  data,
  emptyState,
  hasRowReordering,
  hasRowSelection,
  isEmpty,
  isLoading,
  isNoResults,
  isRowReorderingDisabled,
  onReorderRows,
  pagination,
  rowReorderingUtilities,
  rowSelection,
  setRowSelection,
  cardLayoutOptions,
  totalRows
}) => {
  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
  const handleRowSelectionChange = (0, _react.useCallback)(row => {
    setRowSelection(rowSelection => Object.fromEntries(row.id in rowSelection ? Object.entries(rowSelection).filter(([key]) => key !== row.id) : Object.entries(rowSelection).concat([[row.id, true]])));
  }, [setRowSelection]);
  return (0, _jsxRuntime.jsx)(_Box.Box, {
    children: isLoading ? (0, _jsxRuntime.jsx)(LoadingContainer, {
      odysseyDesignTokens: odysseyDesignTokens,
      children: (0, _jsxRuntime.jsx)(_CircularProgress.CircularProgress, {})
    }) : (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
      children: !data || data.length === 0 || isEmpty || isNoResults ? (0, _jsxRuntime.jsx)(_Box.Box, {
        children: emptyState
      }) : (0, _jsxRuntime.jsx)(StackContainer, {
        currentLayout: currentLayout,
        maxGridColumns: cardLayoutOptions.maxGridColumns ?? 3,
        odysseyDesignTokens: odysseyDesignTokens,
        role: "list",
        children: data.map((row, index) => {
          const currentIndex = index + (pagination.pageIndex - 1) * pagination.pageSize;
          return (0, _jsxRuntime.jsx)(MemoizedRowDataCard, {
            cardLayoutOptions: cardLayoutOptions,
            currentIndex: currentIndex,
            handleRowSelectionChange: handleRowSelectionChange,
            hasRowReordering: hasRowReordering,
            hasRowSelection: hasRowSelection,
            isRowReorderingDisabled: isRowReorderingDisabled,
            onReorderRows: onReorderRows,
            row: row,
            rowReorderingUtilities: rowReorderingUtilities,
            rowSelection: rowSelection,
            totalRows: totalRows
          }, row.id);
        })
      })
    })
  });
};
const MemoizedCardLayoutContent = exports.CardLayoutContent = (0, _react.memo)(CardLayoutContent);
MemoizedCardLayoutContent.displayName = "CardLayoutContent";
//# sourceMappingURL=CardLayoutContent.cjs.map