import _Skeleton from "@mui/material/Skeleton";
import _CardActionArea from "@mui/material/CardActionArea";
import _Card from "@mui/material/Card";
/*!
 * 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, useMemo } from "react";
import { Box } from ".././Box.js";
import { useOdysseyDesignTokens } from ".././OdysseyDesignTokensContext.js";
import { Heading5, Paragraph, Subordinate } from ".././Typography.js";
import { Button } from "../Buttons/Button.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const APP_TILE_COMPACT_IMAGE_HEIGHT = "2.85714286rem";
export const APP_TILE_IMAGE_HEIGHT = "4.57142857rem";
export const APP_TILE_PLACEHOLDER_IMAGE_WIDTH = "4.57142857rem";
export const appTileVariantValues = ["comfortable", "compact"];
const ImageContainerStyles = styled("div", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "variant"
})(({
  odysseyDesignTokens,
  variant
}) => ({
  display: "flex",
  alignItems: "flex-start",
  justifyContent: variant === "compact" ? "center" : "flex-start",
  maxHeight: variant === "compact" ? APP_TILE_COMPACT_IMAGE_HEIGHT : APP_TILE_IMAGE_HEIGHT,
  marginBlockEnd: variant === "compact" ? odysseyDesignTokens.Spacing4 : odysseyDesignTokens.Spacing3,
  ["img"]: {
    height: variant === "compact" ? APP_TILE_COMPACT_IMAGE_HEIGHT : APP_TILE_IMAGE_HEIGHT,
    width: variant === "compact" ? "100%" : "auto",
    maxWidth: "100%"
  }
}));
const ActionContainerStyles = styled("div", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "variant"
})(({
  odysseyDesignTokens,
  variant = "comfortable"
}) => ({
  alignItems: "center",
  display: "flex",
  minHeight: odysseyDesignTokens.Spacing6,
  position: "absolute",
  right: variant === "compact" ? 0 : odysseyDesignTokens.Spacing2,
  top: variant === "compact" ? 0 : odysseyDesignTokens.Spacing2,
  gap: odysseyDesignTokens.Spacing1,
  zIndex: 1,
  ["& > .MuiTypography-root:last-child"]: {
    marginInlineEnd: odysseyDesignTokens.Spacing2
  }
}));
const ContentContainerStyles = styled("div", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "hasTopSection" && prop !== "variant"
})(({
  odysseyDesignTokens,
  hasTopSection,
  variant
}) => ({
  alignItems: "flex-start",
  paddingBlockStart: hasTopSection ? odysseyDesignTokens.Spacing4 : 0,
  height: "100%",
  [".MuiTypography-root"]: {
    fontSize: variant === "compact" ? odysseyDesignTokens.TypographySizeSubordinate : "auto",
    textAlign: variant === "compact" ? "center" : "left"
  },
  ["& :last-child"]: {
    marginBlockEnd: "0 !important"
  }
}));
const ChildrenContainerStyles = styled("div", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
})(({
  odysseyDesignTokens
}) => ({
  ["&:not(:first-child)"]: {
    marginBlockStart: odysseyDesignTokens.Spacing4
  }
}));
const StyledMuiCardStyles = styled(_Card, {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isPlaceholder" && prop !== "isCompact"
})(({
  odysseyDesignTokens,
  isPlaceholder = false,
  isCompact = false
}) => ({
  position: "relative",
  boxShadow: "none",
  overflow: "unset",
  display: "flex",
  justifyContent: isPlaceholder && isCompact ? "center" : "flex-start",
  padding: odysseyDesignTokens.Spacing4,
  border: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.HueNeutral200} ${odysseyDesignTokens.BorderStyleMain}`,
  borderRadius: odysseyDesignTokens.BorderRadiusMain,
  transition: `border ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,
  "&::after": {
    position: "absolute",
    top: 0,
    left: 0,
    width: "100%",
    height: "100%",
    opacity: 0,
    boxShadow: odysseyDesignTokens.DepthMedium,
    borderRadius: odysseyDesignTokens.BorderRadiusMain,
    transition: `opacity ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,
    zIndex: "-1",
    content: '""'
  },
  "&:hover": {
    borderColor: "transparent",
    "&::after": {
      opacity: 1
    }
  }
}));
const StyledMuiCardActionAreaStyles = styled(_CardActionArea, {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
})(({
  odysseyDesignTokens
}) => ({
  margin: `-${odysseyDesignTokens.Spacing4}`,
  padding: odysseyDesignTokens.Spacing4
}));
const LoadingTile = ({
  image,
  title,
  description,
  children,
  hasTopSection,
  variant
}) => {
  const odysseyDesignTokens = useOdysseyDesignTokens();
  return _jsx(StyledMuiCardStyles, {
    isCompact: variant === "compact",
    isPlaceholder: true,
    odysseyDesignTokens: odysseyDesignTokens,
    children: _jsxs(ContentContainerStyles, {
      hasTopSection: hasTopSection,
      odysseyDesignTokens: odysseyDesignTokens,
      variant: variant,
      children: [hasTopSection && _jsx(ActionContainerStyles, {
        odysseyDesignTokens: odysseyDesignTokens,
        variant: variant,
        children: _jsx(Subordinate, {
          children: variant !== "compact" && _jsx(_Skeleton, {
            width: 50
          })
        })
      }), _jsxs(Box, {
        sx: {
          width: "100%"
        },
        children: [image && _jsx(ImageContainerStyles, {
          odysseyDesignTokens: odysseyDesignTokens,
          variant: variant,
          children: _jsx(_Skeleton, {
            height: variant === "compact" ? APP_TILE_COMPACT_IMAGE_HEIGHT : APP_TILE_IMAGE_HEIGHT,
            variant: "rectangular",
            width: variant === "compact" ? APP_TILE_COMPACT_IMAGE_HEIGHT : APP_TILE_PLACEHOLDER_IMAGE_WIDTH
          })
        }), title && _jsx(Heading5, {
          children: _jsx(_Skeleton, {})
        }), description && variant !== "compact" && _jsx(Paragraph, {
          children: _jsx(_Skeleton, {})
        }), children && _jsx(ChildrenContainerStyles, {
          odysseyDesignTokens: odysseyDesignTokens,
          children: _jsx(_Skeleton, {
            height: odysseyDesignTokens.Spacing6,
            variant: "rounded",
            width: "100%"
          })
        })]
      })]
    })
  });
};
const AppTile = ({
  actionAriaControls,
  actionAriaHasPopup,
  actionAriaExpanded,
  actionLabel,
  actionIcon,
  auxiliaryText,
  children,
  description,
  image,
  isLoading,
  onActionClick,
  onClick,
  title,
  variant = "comfortable"
}) => {
  const odysseyDesignTokens = useOdysseyDesignTokens();
  const tileContent = useMemo(() => _jsxs(ContentContainerStyles, {
    hasTopSection: typeof onActionClick === "function" || Boolean(auxiliaryText),
    odysseyDesignTokens: odysseyDesignTokens,
    variant: variant,
    children: [image && _jsx(ImageContainerStyles, {
      odysseyDesignTokens: odysseyDesignTokens,
      variant: variant,
      children: image
    }), title && _jsx(Heading5, {
      component: "div",
      children: title
    }), description && variant !== "compact" && _jsx(Paragraph, {
      color: "textSecondary",
      children: description
    }), children && _jsx(ChildrenContainerStyles, {
      odysseyDesignTokens: odysseyDesignTokens,
      children: children
    })]
  }), [auxiliaryText, children, description, image, odysseyDesignTokens, onActionClick, title, variant]);
  return isLoading ? _jsx(LoadingTile, {
    children: Boolean(children),
    description: Boolean(description),
    hasTopSection: typeof onActionClick === "function" || Boolean(auxiliaryText),
    image: Boolean(image),
    title: Boolean(title),
    variant: variant
  }) : _jsxs(StyledMuiCardStyles, {
    isCompact: variant === "compact",
    odysseyDesignTokens: odysseyDesignTokens,
    children: [(onActionClick || auxiliaryText) && _jsxs(ActionContainerStyles, {
      odysseyDesignTokens: odysseyDesignTokens,
      variant: variant,
      children: [auxiliaryText && !isLoading && _jsx(Subordinate, {
        children: auxiliaryText
      }), onActionClick && !isLoading && _jsx(Button, {
        ariaControls: actionAriaControls,
        ariaExpanded: actionAriaExpanded,
        ariaHasPopup: actionAriaHasPopup,
        ariaLabel: actionLabel,
        endIcon: actionIcon,
        onClick: onActionClick,
        size: "small",
        tooltipText: actionLabel,
        variant: "floating"
      })]
    }), _jsx(StyledMuiCardActionAreaStyles, {
      odysseyDesignTokens: odysseyDesignTokens,
      onClick: onClick,
      children: tileContent
    })]
  });
};
const MemoizedAppTile = memo(AppTile);
MemoizedAppTile.displayName = "AppTile";
export { MemoizedAppTile as AppTile };
//# sourceMappingURL=AppTile.js.map