"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.cardVariantValues = exports.Card = exports.CARD_IMAGE_SIZE_COMPACT = exports.CARD_IMAGE_SIZE = void 0;
var _CardActions2 = _interopRequireWildcard(require("@mui/material/CardActions"));
var _Skeleton2 = _interopRequireWildcard(require("@mui/material/Skeleton"));
var _CardActionArea2 = _interopRequireDefault(require("@mui/material/CardActionArea"));
var _Card2 = _interopRequireDefault(require("@mui/material/Card"));
var _styled = _interopRequireDefault(require("@emotion/styled"));
var _Typography = require("@mui/material/Typography");
var _react = require("react");
var _ButtonContext = require("./Buttons/ButtonContext.cjs");
var _MenuButton = require("./Buttons/MenuButton.cjs");
var _i18n = require("./i18n.generated/i18n.cjs");
var _More = require("./icons.generated/More.cjs");
var _OdysseyDesignTokensContext = require("./OdysseyDesignTokensContext.cjs");
var _Typography2 = require("./Typography.cjs");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (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 (const 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); }
/*!
 * Copyright (c) 2022-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 cardVariantValues = exports.cardVariantValues = ["tile", "stack", "compact"];
const CARD_IMAGE_SIZE = exports.CARD_IMAGE_SIZE = "64px";
const CARD_IMAGE_SIZE_COMPACT = exports.CARD_IMAGE_SIZE_COMPACT = "48px";
const StyledCard = (0, _styled.default)(_Card2.default, {
  shouldForwardProp: prop => prop !== "cardVariant" && prop !== "isClickable" && prop !== "odysseyDesignTokens"
})(({
  cardVariant,
  isClickable,
  odysseyDesignTokens
}) => ({
  border: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderColorDisplay} ${odysseyDesignTokens.BorderStyleMain}`,
  boxShadow: "none",
  padding: 0,
  display: "flex",
  ...(cardVariant === "compact" && {
    marginBlockEnd: odysseyDesignTokens.Spacing2
  }),
  ["&:hover"]: isClickable ? {
    borderColor: odysseyDesignTokens.HueNeutralWhite,
    boxShadow: odysseyDesignTokens.DepthMedium
  } : {},
  [`& .${_Skeleton2.skeletonClasses.root}`]: {
    transform: "none"
  },
  [`& .${_CardActions2.cardActionsClasses.root} .${_Skeleton2.skeletonClasses.root}`]: {
    height: odysseyDesignTokens.Spacing7
  }
}));
const StyledCardActionArea = (0, _styled.default)(_CardActionArea2.default)(() => ({
  margin: 0,
  padding: 0
}));
const AccessoriesContainer = (0, _styled.default)("div", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "variant"
})(({
  odysseyDesignTokens,
  variant
}) => ({
  display: "flex",
  flexDirection: variant === "compact" ? "row" : "column",
  alignItems: "center",
  gap: odysseyDesignTokens.Spacing1,
  marginBlockStart: variant === "compact" ? odysseyDesignTokens.Spacing4 : odysseyDesignTokens.Spacing5,
  marginInlineStart: variant === "compact" ? odysseyDesignTokens.Spacing4 : odysseyDesignTokens.Spacing4,
  marginInlineEnd: `-${odysseyDesignTokens.Spacing2}`,
  height: variant === "compact" ? odysseyDesignTokens.Spacing8 : "auto",
  [`& .${_Skeleton2.skeletonClasses.root}`]: {
    width: odysseyDesignTokens.Spacing5,
    height: odysseyDesignTokens.Spacing5
  }
}));
const InnerContainer = (0, _styled.default)("div", {
  shouldForwardProp: prop => prop !== "hasDetailPanel" && prop !== "numberOfChildNodes" && prop !== "odysseyDesignTokens" && prop !== "variant"
})(({
  hasDetailPanel,
  numberOfChildNodes = 0,
  odysseyDesignTokens,
  variant
}) => ({
  alignItems: variant === "compact" && !hasDetailPanel && numberOfChildNodes <= 2 ? "center" : "flex-start",
  display: "flex",
  backgroundColor: odysseyDesignTokens.HueNeutralWhite,
  padding: variant === "compact" ? odysseyDesignTokens.Spacing4 : odysseyDesignTokens.Spacing5,
  flexDirection: variant === "tile" ? "column" : "row",
  gap: odysseyDesignTokens.Spacing4,
  width: "100%"
}));
const ImageContainer = (0, _styled.default)("div", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "variant" && prop !== "hasMenuButton"
})(({
  odysseyDesignTokens,
  variant,
  hasMenuButton
}) => ({
  height: variant === "compact" ? CARD_IMAGE_SIZE_COMPACT : CARD_IMAGE_SIZE,
  paddingInlineEnd: variant === "tile" && hasMenuButton ? odysseyDesignTokens.Spacing4 : 0,
  [`& > .${_Skeleton2.skeletonClasses.root}`]: {
    height: "100%",
    aspectRatio: 1
  }
}));
const ContentContainer = (0, _styled.default)("div", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
})(({
  odysseyDesignTokens
}) => ({
  display: "flex",
  flexDirection: "column",
  gap: odysseyDesignTokens.Spacing4,
  width: "100%",
  "& > *": {
    marginBlock: 0
  },
  [`& .${_Skeleton2.skeletonClasses.root} + .${_Skeleton2.skeletonClasses.root}`]: {
    marginBlockStart: odysseyDesignTokens.Spacing1
  }
}));
const UpperContentContainer = (0, _styled.default)("div", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "variant" && prop !== "hasMenuButton"
})(({
  odysseyDesignTokens,
  variant,
  hasMenuButton
}) => ({
  display: "flex",
  flexDirection: "column",
  gap: variant === "compact" ? odysseyDesignTokens.Spacing1 : odysseyDesignTokens.Spacing4,
  paddingInlineEnd: variant !== "tile" && hasMenuButton ? odysseyDesignTokens.Spacing4 : 0,
  [`& > .${_Typography.typographyClasses.root}`]: {
    marginBlockEnd: 0
  }
}));
const OverlineTitleContainer = (0, _styled.default)("div", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
})(({
  odysseyDesignTokens
}) => ({
  display: "flex",
  flexDirection: "column",
  gap: odysseyDesignTokens.Spacing1,
  [`& > .${_Typography.typographyClasses.root}`]: {
    marginBlockEnd: 0
  }
}));
const Content = (0, _styled.default)("div", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
})(({
  odysseyDesignTokens
}) => ({
  display: "flex",
  flexDirection: "column",
  alignItems: "flex-start",
  backgroundColor: odysseyDesignTokens.HueNeutralWhite
}));
const MenuButtonContainer = (0, _styled.default)("div", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "variant"
})(({
  odysseyDesignTokens,
  variant
}) => ({
  position: "absolute",
  right: odysseyDesignTokens.Spacing2,
  top: variant === "compact" ? odysseyDesignTokens.Spacing4 : odysseyDesignTokens.Spacing2,
  height: variant === "compact" ? odysseyDesignTokens.Spacing8 : "auto",
  display: "flex",
  alignItems: "center",
  [`& .${_Skeleton2.skeletonClasses.root}`]: {
    width: odysseyDesignTokens.Spacing5,
    height: odysseyDesignTokens.Spacing5,
    margin: odysseyDesignTokens.Spacing1
  }
}));
const getNumberOfDefinedReactNodes = props => _react.Children.toArray(props).length;
const Card = ({
  children,
  description,
  detailPanel,
  image,
  isLoading,
  overline,
  title,
  titleId,
  variant,
  accessory,
  button,
  menuButtonChildren,
  onClick,
  __role: role
}) => {
  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
  const {
    t
  } = (0, _i18n.useTranslation)();
  const loadingContent = (0, _react.useMemo)(() => (0, _jsxRuntime.jsxs)(InnerContainer, {
    numberOfChildNodes: getNumberOfDefinedReactNodes([button, children, description, overline, title]),
    odysseyDesignTokens: odysseyDesignTokens,
    variant: variant,
    children: [image && (0, _jsxRuntime.jsx)(ImageContainer, {
      hasMenuButton: Boolean(menuButtonChildren),
      odysseyDesignTokens: odysseyDesignTokens,
      variant: variant,
      children: (0, _jsxRuntime.jsx)(_Skeleton2.default, {
        variant: "circular"
      })
    }), (0, _jsxRuntime.jsxs)(ContentContainer, {
      odysseyDesignTokens: odysseyDesignTokens,
      children: [(0, _jsxRuntime.jsxs)(UpperContentContainer, {
        hasMenuButton: Boolean(menuButtonChildren),
        odysseyDesignTokens: odysseyDesignTokens,
        variant: variant,
        children: [(0, _jsxRuntime.jsxs)(OverlineTitleContainer, {
          odysseyDesignTokens: odysseyDesignTokens,
          children: [overline && (0, _jsxRuntime.jsx)(_Typography2.Support, {
            children: (0, _jsxRuntime.jsx)(_Skeleton2.default, {
              width: "50%"
            })
          }), title && (0, _jsxRuntime.jsx)(_Typography2.Typography, {
            component: "div",
            variant: variant === "tile" ? "h4" : "h5",
            children: (0, _jsxRuntime.jsx)(_Skeleton2.default, {
              width: "33%"
            })
          })]
        }), description && (0, _jsxRuntime.jsxs)(_Typography2.Paragraph, {
          children: [(0, _jsxRuntime.jsx)(_Skeleton2.default, {
            width: "100%"
          }), (0, _jsxRuntime.jsx)(_Skeleton2.default, {
            width: "50%"
          })]
        })]
      }), children && (0, _jsxRuntime.jsx)(Content, {
        odysseyDesignTokens: odysseyDesignTokens,
        children: (0, _jsxRuntime.jsx)(_Skeleton2.default, {
          width: "50%"
        })
      }), button && (0, _jsxRuntime.jsx)(_CardActions2.default, {
        children: (0, _jsxRuntime.jsx)(_Skeleton2.default, {
          variant: "rounded",
          width: "100%"
        })
      })]
    })]
  }), [button, children, description, image, menuButtonChildren, odysseyDesignTokens, overline, title, variant]);
  const cardContent = (0, _react.useMemo)(() => {
    const buttonProviderValue = {
      isFullWidth: true
    };
    return (0, _jsxRuntime.jsxs)(InnerContainer, {
      hasDetailPanel: Boolean(detailPanel),
      numberOfChildNodes: getNumberOfDefinedReactNodes([button, children, description, overline, title]),
      odysseyDesignTokens: odysseyDesignTokens,
      variant: variant,
      children: [image && (0, _jsxRuntime.jsx)(ImageContainer, {
        hasMenuButton: Boolean(menuButtonChildren),
        odysseyDesignTokens: odysseyDesignTokens,
        variant: variant,
        children: image
      }), (0, _jsxRuntime.jsxs)(ContentContainer, {
        odysseyDesignTokens: odysseyDesignTokens,
        children: [(0, _jsxRuntime.jsxs)(UpperContentContainer, {
          hasMenuButton: Boolean(menuButtonChildren),
          odysseyDesignTokens: odysseyDesignTokens,
          variant: variant,
          children: [(0, _jsxRuntime.jsxs)(OverlineTitleContainer, {
            odysseyDesignTokens: odysseyDesignTokens,
            children: [overline && (0, _jsxRuntime.jsx)(_Typography2.Support, {
              component: "div",
              children: overline
            }), title && (0, _jsxRuntime.jsx)(_Typography2.Typography, {
              component: "div",
              id: titleId,
              variant: variant === "tile" ? "h4" : "h5",
              children: title
            })]
          }), description && (0, _jsxRuntime.jsx)(_Typography2.Paragraph, {
            color: "textSecondary",
            children: description
          })]
        }), children && (0, _jsxRuntime.jsx)(Content, {
          odysseyDesignTokens: odysseyDesignTokens,
          children: children
        }), button && (0, _jsxRuntime.jsx)(_CardActions2.default, {
          children: (0, _jsxRuntime.jsx)(_ButtonContext.ButtonContext.Provider, {
            value: buttonProviderValue,
            children: button
          })
        }), detailPanel && (0, _jsxRuntime.jsx)(Content, {
          odysseyDesignTokens: odysseyDesignTokens,
          children: detailPanel
        })]
      })]
    });
  }, [button, children, description, detailPanel, image, menuButtonChildren, odysseyDesignTokens, overline, title, titleId, variant]);
  return (0, _jsxRuntime.jsxs)(StyledCard, {
    cardVariant: variant,
    isClickable: Boolean(onClick),
    odysseyDesignTokens: odysseyDesignTokens,
    role: role,
    children: [Boolean(accessory) && (0, _jsxRuntime.jsx)(AccessoriesContainer, {
      odysseyDesignTokens: odysseyDesignTokens,
      variant: variant,
      children: isLoading ? (0, _jsxRuntime.jsx)(_Skeleton2.default, {
        variant: "circular"
      }) : accessory
    }), isLoading ? loadingContent : onClick ? (0, _jsxRuntime.jsx)(StyledCardActionArea, {
      onClick: onClick,
      children: cardContent
    }) : cardContent, menuButtonChildren && (0, _jsxRuntime.jsx)(MenuButtonContainer, {
      odysseyDesignTokens: odysseyDesignTokens,
      variant: variant,
      children: isLoading ? (0, _jsxRuntime.jsx)(_Skeleton2.default, {
        variant: "circular"
      }) : (0, _jsxRuntime.jsx)(_MenuButton.MenuButton, {
        ariaLabel: t("table.moreactions.arialabel"),
        buttonVariant: "floating",
        endIcon: (0, _jsxRuntime.jsx)(_More.MoreIcon, {}),
        menuAlignment: "right",
        size: "small",
        tooltipText: t("table.actions"),
        children: menuButtonChildren
      })
    })]
  });
};
const MemoizedCard = exports.Card = (0, _react.memo)(Card);
MemoizedCard.displayName = "Card";
//# sourceMappingURL=Card.cjs.map