"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.appTileVariantValues = exports.AppTile = exports.APP_TILE_PLACEHOLDER_IMAGE_WIDTH = exports.APP_TILE_IMAGE_HEIGHT = exports.APP_TILE_COMPACT_IMAGE_HEIGHT = void 0;
var _Skeleton2 = _interopRequireDefault(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 _react = require("react");
var _Box = require(".././Box.cjs");
var _OdysseyDesignTokensContext = require(".././OdysseyDesignTokensContext.cjs");
var _Typography = require(".././Typography.cjs");
var _Button = require("../Buttons/Button.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 APP_TILE_COMPACT_IMAGE_HEIGHT = exports.APP_TILE_COMPACT_IMAGE_HEIGHT = "2.85714286rem";
const APP_TILE_IMAGE_HEIGHT = exports.APP_TILE_IMAGE_HEIGHT = "4.57142857rem";
const APP_TILE_PLACEHOLDER_IMAGE_WIDTH = exports.APP_TILE_PLACEHOLDER_IMAGE_WIDTH = "4.57142857rem";
const appTileVariantValues = exports.appTileVariantValues = ["comfortable", "compact"];
const ImageContainerStyles = (0, _styled.default)("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 = (0, _styled.default)("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 = (0, _styled.default)("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 = (0, _styled.default)("div", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
})(({
  odysseyDesignTokens
}) => ({
  ["&:not(:first-child)"]: {
    marginBlockStart: odysseyDesignTokens.Spacing4
  }
}));
const StyledMuiCardStyles = (0, _styled.default)(_Card2.default, {
  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 = (0, _styled.default)(_CardActionArea2.default, {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
})(({
  odysseyDesignTokens
}) => ({
  margin: `-${odysseyDesignTokens.Spacing4}`,
  padding: odysseyDesignTokens.Spacing4
}));
const LoadingTile = ({
  image,
  title,
  description,
  children,
  hasTopSection,
  variant
}) => {
  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
  return (0, _jsxRuntime.jsx)(StyledMuiCardStyles, {
    isCompact: variant === "compact",
    isPlaceholder: true,
    odysseyDesignTokens: odysseyDesignTokens,
    children: (0, _jsxRuntime.jsxs)(ContentContainerStyles, {
      hasTopSection: hasTopSection,
      odysseyDesignTokens: odysseyDesignTokens,
      variant: variant,
      children: [hasTopSection && (0, _jsxRuntime.jsx)(ActionContainerStyles, {
        odysseyDesignTokens: odysseyDesignTokens,
        variant: variant,
        children: (0, _jsxRuntime.jsx)(_Typography.Subordinate, {
          children: variant !== "compact" && (0, _jsxRuntime.jsx)(_Skeleton2.default, {
            width: 50
          })
        })
      }), (0, _jsxRuntime.jsxs)(_Box.Box, {
        sx: {
          width: "100%"
        },
        children: [image && (0, _jsxRuntime.jsx)(ImageContainerStyles, {
          odysseyDesignTokens: odysseyDesignTokens,
          variant: variant,
          children: (0, _jsxRuntime.jsx)(_Skeleton2.default, {
            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 && (0, _jsxRuntime.jsx)(_Typography.Heading5, {
          children: (0, _jsxRuntime.jsx)(_Skeleton2.default, {})
        }), description && variant !== "compact" && (0, _jsxRuntime.jsx)(_Typography.Paragraph, {
          children: (0, _jsxRuntime.jsx)(_Skeleton2.default, {})
        }), children && (0, _jsxRuntime.jsx)(ChildrenContainerStyles, {
          odysseyDesignTokens: odysseyDesignTokens,
          children: (0, _jsxRuntime.jsx)(_Skeleton2.default, {
            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 = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
  const tileContent = (0, _react.useMemo)(() => (0, _jsxRuntime.jsxs)(ContentContainerStyles, {
    hasTopSection: typeof onActionClick === "function" || Boolean(auxiliaryText),
    odysseyDesignTokens: odysseyDesignTokens,
    variant: variant,
    children: [image && (0, _jsxRuntime.jsx)(ImageContainerStyles, {
      odysseyDesignTokens: odysseyDesignTokens,
      variant: variant,
      children: image
    }), title && (0, _jsxRuntime.jsx)(_Typography.Heading5, {
      component: "div",
      children: title
    }), description && variant !== "compact" && (0, _jsxRuntime.jsx)(_Typography.Paragraph, {
      color: "textSecondary",
      children: description
    }), children && (0, _jsxRuntime.jsx)(ChildrenContainerStyles, {
      odysseyDesignTokens: odysseyDesignTokens,
      children: children
    })]
  }), [auxiliaryText, children, description, image, odysseyDesignTokens, onActionClick, title, variant]);
  return isLoading ? (0, _jsxRuntime.jsx)(LoadingTile, {
    children: Boolean(children),
    description: Boolean(description),
    hasTopSection: typeof onActionClick === "function" || Boolean(auxiliaryText),
    image: Boolean(image),
    title: Boolean(title),
    variant: variant
  }) : (0, _jsxRuntime.jsxs)(StyledMuiCardStyles, {
    isCompact: variant === "compact",
    odysseyDesignTokens: odysseyDesignTokens,
    children: [(onActionClick || auxiliaryText) && (0, _jsxRuntime.jsxs)(ActionContainerStyles, {
      odysseyDesignTokens: odysseyDesignTokens,
      variant: variant,
      children: [auxiliaryText && !isLoading && (0, _jsxRuntime.jsx)(_Typography.Subordinate, {
        children: auxiliaryText
      }), onActionClick && !isLoading && (0, _jsxRuntime.jsx)(_Button.Button, {
        ariaControls: actionAriaControls,
        ariaExpanded: actionAriaExpanded,
        ariaHasPopup: actionAriaHasPopup,
        ariaLabel: actionLabel,
        endIcon: actionIcon,
        onClick: onActionClick,
        size: "small",
        tooltipText: actionLabel,
        variant: "floating"
      })]
    }), (0, _jsxRuntime.jsx)(StyledMuiCardActionAreaStyles, {
      odysseyDesignTokens: odysseyDesignTokens,
      onClick: onClick,
      children: tileContent
    })]
  });
};
const MemoizedAppTile = exports.AppTile = (0, _react.memo)(AppTile);
MemoizedAppTile.displayName = "AppTile";
//# sourceMappingURL=AppTile.cjs.map