import _CardActions from "@mui/material/CardActions";
import _Skeleton from "@mui/material/Skeleton";
import _CardActionArea from "@mui/material/CardActionArea";
import _Card from "@mui/material/Card";
/*!
 * 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.
 */

import styled from "@emotion/styled";
import { cardActionsClasses } from "@mui/material/CardActions";
import { skeletonClasses } from "@mui/material/Skeleton";
import { typographyClasses } from "@mui/material/Typography";
import { Children, memo, useMemo } from "react";
import { ButtonContext } from "./Buttons/ButtonContext.js";
import { MenuButton } from "./Buttons/MenuButton.js";
import { useTranslation } from "./i18n.generated/i18n.js";
import { MoreIcon } from "./icons.generated/More.js";
import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
import { Paragraph, Support, Typography } from "./Typography.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const cardVariantValues = ["tile", "stack", "compact"];
export const CARD_IMAGE_SIZE = "64px";
export const CARD_IMAGE_SIZE_COMPACT = "48px";
const StyledCard = styled(_Card, {
  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
  } : {},
  [`& .${skeletonClasses.root}`]: {
    transform: "none"
  },
  [`& .${cardActionsClasses.root} .${skeletonClasses.root}`]: {
    height: odysseyDesignTokens.Spacing7
  }
}));
const StyledCardActionArea = styled(_CardActionArea)(() => ({
  margin: 0,
  padding: 0
}));
const AccessoriesContainer = styled("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",
  [`& .${skeletonClasses.root}`]: {
    width: odysseyDesignTokens.Spacing5,
    height: odysseyDesignTokens.Spacing5
  }
}));
const InnerContainer = styled("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 = styled("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,
  [`& > .${skeletonClasses.root}`]: {
    height: "100%",
    aspectRatio: 1
  }
}));
const ContentContainer = styled("div", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
})(({
  odysseyDesignTokens
}) => ({
  display: "flex",
  flexDirection: "column",
  gap: odysseyDesignTokens.Spacing4,
  width: "100%",
  "& > *": {
    marginBlock: 0
  },
  [`& .${skeletonClasses.root} + .${skeletonClasses.root}`]: {
    marginBlockStart: odysseyDesignTokens.Spacing1
  }
}));
const UpperContentContainer = styled("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,
  [`& > .${typographyClasses.root}`]: {
    marginBlockEnd: 0
  }
}));
const OverlineTitleContainer = styled("div", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
})(({
  odysseyDesignTokens
}) => ({
  display: "flex",
  flexDirection: "column",
  gap: odysseyDesignTokens.Spacing1,
  [`& > .${typographyClasses.root}`]: {
    marginBlockEnd: 0
  }
}));
const Content = styled("div", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
})(({
  odysseyDesignTokens
}) => ({
  display: "flex",
  flexDirection: "column",
  alignItems: "flex-start",
  backgroundColor: odysseyDesignTokens.HueNeutralWhite
}));
const MenuButtonContainer = styled("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",
  [`& .${skeletonClasses.root}`]: {
    width: odysseyDesignTokens.Spacing5,
    height: odysseyDesignTokens.Spacing5,
    margin: odysseyDesignTokens.Spacing1
  }
}));
const getNumberOfDefinedReactNodes = props => Children.toArray(props).length;
const Card = ({
  children,
  description,
  detailPanel,
  image,
  isLoading,
  overline,
  title,
  titleId,
  variant,
  accessory,
  button,
  menuButtonChildren,
  onClick,
  __role: role
}) => {
  const odysseyDesignTokens = useOdysseyDesignTokens();
  const {
    t
  } = useTranslation();
  const loadingContent = useMemo(() => _jsxs(InnerContainer, {
    numberOfChildNodes: getNumberOfDefinedReactNodes([button, children, description, overline, title]),
    odysseyDesignTokens: odysseyDesignTokens,
    variant: variant,
    children: [image && _jsx(ImageContainer, {
      hasMenuButton: Boolean(menuButtonChildren),
      odysseyDesignTokens: odysseyDesignTokens,
      variant: variant,
      children: _jsx(_Skeleton, {
        variant: "circular"
      })
    }), _jsxs(ContentContainer, {
      odysseyDesignTokens: odysseyDesignTokens,
      children: [_jsxs(UpperContentContainer, {
        hasMenuButton: Boolean(menuButtonChildren),
        odysseyDesignTokens: odysseyDesignTokens,
        variant: variant,
        children: [_jsxs(OverlineTitleContainer, {
          odysseyDesignTokens: odysseyDesignTokens,
          children: [overline && _jsx(Support, {
            children: _jsx(_Skeleton, {
              width: "50%"
            })
          }), title && _jsx(Typography, {
            component: "div",
            variant: variant === "tile" ? "h4" : "h5",
            children: _jsx(_Skeleton, {
              width: "33%"
            })
          })]
        }), description && _jsxs(Paragraph, {
          children: [_jsx(_Skeleton, {
            width: "100%"
          }), _jsx(_Skeleton, {
            width: "50%"
          })]
        })]
      }), children && _jsx(Content, {
        odysseyDesignTokens: odysseyDesignTokens,
        children: _jsx(_Skeleton, {
          width: "50%"
        })
      }), button && _jsx(_CardActions, {
        children: _jsx(_Skeleton, {
          variant: "rounded",
          width: "100%"
        })
      })]
    })]
  }), [button, children, description, image, menuButtonChildren, odysseyDesignTokens, overline, title, variant]);
  const cardContent = useMemo(() => {
    const buttonProviderValue = {
      isFullWidth: true
    };
    return _jsxs(InnerContainer, {
      hasDetailPanel: Boolean(detailPanel),
      numberOfChildNodes: getNumberOfDefinedReactNodes([button, children, description, overline, title]),
      odysseyDesignTokens: odysseyDesignTokens,
      variant: variant,
      children: [image && _jsx(ImageContainer, {
        hasMenuButton: Boolean(menuButtonChildren),
        odysseyDesignTokens: odysseyDesignTokens,
        variant: variant,
        children: image
      }), _jsxs(ContentContainer, {
        odysseyDesignTokens: odysseyDesignTokens,
        children: [_jsxs(UpperContentContainer, {
          hasMenuButton: Boolean(menuButtonChildren),
          odysseyDesignTokens: odysseyDesignTokens,
          variant: variant,
          children: [_jsxs(OverlineTitleContainer, {
            odysseyDesignTokens: odysseyDesignTokens,
            children: [overline && _jsx(Support, {
              component: "div",
              children: overline
            }), title && _jsx(Typography, {
              component: "div",
              id: titleId,
              variant: variant === "tile" ? "h4" : "h5",
              children: title
            })]
          }), description && _jsx(Paragraph, {
            color: "textSecondary",
            children: description
          })]
        }), children && _jsx(Content, {
          odysseyDesignTokens: odysseyDesignTokens,
          children: children
        }), button && _jsx(_CardActions, {
          children: _jsx(ButtonContext.Provider, {
            value: buttonProviderValue,
            children: button
          })
        }), detailPanel && _jsx(Content, {
          odysseyDesignTokens: odysseyDesignTokens,
          children: detailPanel
        })]
      })]
    });
  }, [button, children, description, detailPanel, image, menuButtonChildren, odysseyDesignTokens, overline, title, titleId, variant]);
  return _jsxs(StyledCard, {
    cardVariant: variant,
    isClickable: Boolean(onClick),
    odysseyDesignTokens: odysseyDesignTokens,
    role: role,
    children: [Boolean(accessory) && _jsx(AccessoriesContainer, {
      odysseyDesignTokens: odysseyDesignTokens,
      variant: variant,
      children: isLoading ? _jsx(_Skeleton, {
        variant: "circular"
      }) : accessory
    }), isLoading ? loadingContent : onClick ? _jsx(StyledCardActionArea, {
      onClick: onClick,
      children: cardContent
    }) : cardContent, menuButtonChildren && _jsx(MenuButtonContainer, {
      odysseyDesignTokens: odysseyDesignTokens,
      variant: variant,
      children: isLoading ? _jsx(_Skeleton, {
        variant: "circular"
      }) : _jsx(MenuButton, {
        ariaLabel: t("table.moreactions.arialabel"),
        buttonVariant: "floating",
        endIcon: _jsx(MoreIcon, {}),
        menuAlignment: "right",
        size: "small",
        tooltipText: t("table.actions"),
        children: menuButtonChildren
      })
    })]
  });
};
const MemoizedCard = memo(Card);
MemoizedCard.displayName = "Card";
export { MemoizedCard as Card };
//# sourceMappingURL=Card.js.map