/*!
 * 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.
 */

import styled from "@emotion/styled";
import { memo, useCallback, useMemo } from "react";
import { Box } from "../../Box.js";
import { CircularProgress } from "../../CircularProgress.js";
import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
import { DataCard } from "./DataCard.js";
import { RowActions } from "./RowActions.js";
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
const StackContainer = styled("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 = styled("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 = useCallback(() => handleRowSelectionChange(row), [handleRowSelectionChange, row]);
  const detailPanel = useMemo(() => cardLayoutOptions.renderDetailPanel?.({
    row
  }), [cardLayoutOptions, row]);
  const menuButtonChildren = useMemo(() => cardLayoutOptions.rowActionMenuItems || hasRowReordering ? _jsx(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 _jsx(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 = 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 = useOdysseyDesignTokens();
  const handleRowSelectionChange = 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 _jsx(Box, {
    children: isLoading ? _jsx(LoadingContainer, {
      odysseyDesignTokens: odysseyDesignTokens,
      children: _jsx(CircularProgress, {})
    }) : _jsx(_Fragment, {
      children: !data || data.length === 0 || isEmpty || isNoResults ? _jsx(Box, {
        children: emptyState
      }) : _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 _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 = memo(CardLayoutContent);
MemoizedCardLayoutContent.displayName = "CardLayoutContent";
export { MemoizedCardLayoutContent as CardLayoutContent };
//# sourceMappingURL=CardLayoutContent.js.map