import React from "react";
import {
  AppEmbedData_ImageStyles_Position,
  AppEmbedData_RibbonStyles_Placement
} from "./../../ricos-schema/next-schema/generated/ricos_document.js";
import { MAX_RIBBON_TEXT_LENGTH } from "../constants.js";
import {
  generateContainerClassName,
  generateContentClasses,
  generateImageContainerProps
} from "../viewer/vertical-embed-styles.js";
import { CardContent } from "./card-content.js";
import contentStyles from "./card-content-scss.js";
import styles from "./card-scss.js";
import { Ribbon } from "./ribbon.js";
import { useBackgroundImageUrl } from "./use-background-image-url.js";
const Card = (props) => {
  const { title, buttonText, direction, image, componentData, ribbonText } = props;
  const imageStyles = componentData?.imageStyles || {};
  const shouldShowImage = !componentData?.hideImage && (image?.src?.url || image?.src?.id);
  const ribbonPlacement = componentData?.ribbonStyles?.ribbonPlacement || AppEmbedData_RibbonStyles_Placement.PRODUCT_INFO;
  const shouldShowRibbon = !(componentData?.hideRibbon ?? true) && ribbonText;
  const { containerRef, backgroundImageUrl } = useBackgroundImageUrl(image);
  const imageContainerProps = generateImageContainerProps(imageStyles, styles);
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      style: { direction },
      className: generateContainerClassName(direction, imageStyles, styles)
    },
    shouldShowImage && /* @__PURE__ */ React.createElement("div", { className: styles.imageContainer }, /* @__PURE__ */ React.createElement(
      "div",
      {
        ref: containerRef,
        className: imageContainerProps.className,
        style: {
          ...imageContainerProps.style,
          backgroundImage: backgroundImageUrl ? `url(${backgroundImageUrl})` : void 0
        },
        role: "img",
        "aria-label": title
      }
    ), shouldShowRibbon && ribbonPlacement === AppEmbedData_RibbonStyles_Placement.IMAGE && /* @__PURE__ */ React.createElement("div", { className: styles.imageRibbon }, /* @__PURE__ */ React.createElement(Ribbon, null, truncateRibbonText(ribbonText || "")))),
    /* @__PURE__ */ React.createElement(
      CardContent,
      {
        title,
        buttonText,
        componentData,
        imagePosition: imageStyles.imagePosition || AppEmbedData_ImageStyles_Position.START,
        contentClasses: generateContentClasses(
          componentData?.cardStyles,
          imageStyles.imagePosition || AppEmbedData_ImageStyles_Position.START,
          contentStyles
        ),
        ribbonText,
        ribbonPlacement
      }
    )
  );
};
const truncateRibbonText = (text) => {
  return text.length <= MAX_RIBBON_TEXT_LENGTH ? text : `${text.substring(0, MAX_RIBBON_TEXT_LENGTH)}...`;
};
export {
  Card
};
//# sourceMappingURL=card.js.map
