import classNames from "classnames";
import {
  AppEmbedData_CardStyles_Alignment,
  AppEmbedData_CardStyles_Type,
  AppEmbedData_ImageStyles_AspectRatio,
  AppEmbedData_ImageStyles_Position,
  AppEmbedData_ImageStyles_Resizing,
  AppEmbedData_RibbonStyles_Placement
} from "./../../ricos-schema/next-schema/generated/ricos_document.js";
import { resolveCssColor } from "./../../_shared/resolve-css-color.js";
const MIN_IMAGE_SIZE = 120;
const TITLE_PRICE_LAYOUT = {
  STACKED: "STACKED",
  SIDE_BY_SIDE: "SIDE_BY_SIDE"
};
const BUTTON_SIZE_STYLES = {
  SMALL: {
    "--vertical-embed-button-font-size": "12px",
    "--vertical-embed-button-padding": "6px 9px"
  },
  LARGE: {
    "--vertical-embed-button-font-size": "16px",
    "--vertical-embed-button-padding": "15px 24px"
  },
  MEDIUM: {
    "--vertical-embed-button-font-size": "14px",
    "--vertical-embed-button-padding": "12px"
  }
};
const convertToPixels = (value) => {
  return value !== void 0 ? `${value}px` : void 0;
};
const generateCardStyles = (cardStyles, hasImage, settings) => {
  const cardType = cardStyles?.type || AppEmbedData_CardStyles_Type.CONTAINED;
  return {
    "--vertical-embed-title-color": resolveCssColor(
      cardStyles?.titleColor ?? settings?.colors?.titleColor
    ),
    "--vertical-embed-text-color": resolveCssColor(
      cardStyles?.textColor ?? settings?.colors?.textColor
    ),
    "--vertical-embed-price-color": resolveCssColor(
      cardStyles?.textColor ?? settings?.colors?.textColor
    ),
    "--vertical-embed-background-color": resolveCssColor(
      cardStyles?.backgroundColor ?? settings?.colors?.backgroundColor
    ),
    "--vertical-embed-border-color": resolveCssColor(
      cardStyles?.borderColor ?? settings?.colors?.borderColor
    ),
    "--vertical-embed-border-width": convertToPixels(cardStyles?.borderWidth) || "1px",
    "--vertical-embed-border-radius": convertToPixels(cardStyles?.borderRadius),
    "--vertical-embed-content-padding": cardType === AppEmbedData_CardStyles_Type.FRAMELESS ? "0" : "18px"
  };
};
const generateButtonStyles = (buttonStyles, settings) => {
  const getButtonSizeStyles = (size) => {
    const buttonSize = size;
    return BUTTON_SIZE_STYLES[buttonSize] || BUTTON_SIZE_STYLES.MEDIUM;
  };
  return {
    "--vertical-embed-button-fill-color": resolveCssColor(
      buttonStyles?.backgroundColor ?? settings?.colors?.buttonFillColor
    ),
    "--vertical-embed-button-text-color": resolveCssColor(
      buttonStyles?.textColor ?? settings?.colors?.buttonTextColor
    ),
    "--vertical-embed-button-border-color": resolveCssColor(
      buttonStyles?.borderColor ?? settings?.colors?.buttonBorderColor
    ),
    "--vertical-embed-button-border-width": convertToPixels(buttonStyles?.borderWidth),
    "--vertical-embed-button-border-radius": convertToPixels(buttonStyles?.borderRadius),
    "--vertical-embed-button-hover-fill-color": resolveCssColor(
      buttonStyles?.backgroundColorHover ?? settings?.colors?.buttonFillColorHover
    ),
    "--vertical-embed-button-hover-text-color": resolveCssColor(
      buttonStyles?.textColorHover ?? settings?.colors?.buttonTextColorHover
    ),
    "--vertical-embed-button-hover-border-color": resolveCssColor(
      buttonStyles?.borderColorHover ?? settings?.colors?.buttonBorderColorHover
    ),
    ...getButtonSizeStyles(buttonStyles?.buttonSize)
  };
};
const generateImageStyles = (imageStyles, settings) => {
  return {
    "--vertical-embed-image-border-color": resolveCssColor(
      imageStyles?.borderColor ?? settings?.colors?.imageBorderColor
    ),
    "--vertical-embed-image-border-width": convertToPixels(imageStyles?.borderWidth),
    "--vertical-embed-image-border-radius": convertToPixels(imageStyles?.borderRadius)
  };
};
const generateRibbonStyles = (ribbonStyles, settings) => {
  return {
    "--vertical-embed-ribbon-fill-color": resolveCssColor(
      ribbonStyles?.backgroundColor ?? settings?.colors?.ribbonFillColor
    ),
    "--vertical-embed-ribbon-text-color": resolveCssColor(
      ribbonStyles?.textColor ?? settings?.colors?.ribbonTextColor
    ),
    "--vertical-embed-ribbon-border-color": resolveCssColor(
      ribbonStyles?.borderColor ?? settings?.colors?.ribbonBorderColor
    ),
    "--vertical-embed-ribbon-border-width": convertToPixels(ribbonStyles?.borderWidth),
    "--vertical-embed-ribbon-border-radius": convertToPixels(ribbonStyles?.borderRadius) || "16px"
  };
};
const generateVerticalEmbedStyles = (componentData, settings) => {
  const hasImage = !componentData?.hideImage && !!componentData?.image?.src?.url;
  return {
    ...generateCardStyles(componentData.cardStyles, hasImage, settings),
    ...generateButtonStyles(componentData.buttonStyles, settings),
    ...generateImageStyles(componentData.imageStyles, settings),
    ...generateRibbonStyles(componentData.ribbonStyles, settings)
  };
};
const generateCardClasses = (cardStyles, classes) => {
  return {
    [classes.frameless]: cardStyles?.type === AppEmbedData_CardStyles_Type.FRAMELESS
  };
};
const generateRibbonClasses = (ribbonStyles, classes) => {
  if (!ribbonStyles) {
    return {};
  }
  return {
    [classes.ribbonOnImage]: ribbonStyles.ribbonPlacement === AppEmbedData_RibbonStyles_Placement.IMAGE,
    [classes.ribbonAboveInfo]: ribbonStyles.ribbonPlacement === AppEmbedData_RibbonStyles_Placement.PRODUCT_INFO
  };
};
const generateLayoutClasses = (settings, classes) => {
  return {
    [classes.slimLayout]: settings.slimLayout
  };
};
const generateVerticalEmbedClasses = (componentData, settings, classes) => {
  return {
    ...generateLayoutClasses(settings, classes),
    ...generateCardClasses(componentData.cardStyles, classes),
    ...generateRibbonClasses(componentData.ribbonStyles, classes)
  };
};
const generateImageContainerProps = (imageStyles, classes) => {
  const imagePosition = imageStyles?.imagePosition || AppEmbedData_ImageStyles_Position.START;
  const aspectRatio = imageStyles?.aspectRatio || AppEmbedData_ImageStyles_AspectRatio.SQUARE;
  const resizing = imageStyles?.resizing || AppEmbedData_ImageStyles_Resizing.FILL;
  const baseClass = imagePosition === AppEmbedData_ImageStyles_Position.TOP ? classes.responsiveImage : classes.image;
  const aspectClass = aspectRatio === AppEmbedData_ImageStyles_AspectRatio.SQUARE ? classes.squareImage : classes.rectangleImage;
  const resizingClass = resizing === AppEmbedData_ImageStyles_Resizing.FIT ? classes.imageFit : classes.imageFill;
  const containerStyle = {
    minWidth: `${MIN_IMAGE_SIZE}px`,
    minHeight: `${MIN_IMAGE_SIZE}px`,
    backgroundSize: resizing === AppEmbedData_ImageStyles_Resizing.FIT ? "contain" : "cover",
    backgroundPosition: "center",
    backgroundRepeat: "no-repeat"
  };
  if (imagePosition === AppEmbedData_ImageStyles_Position.TOP) {
    if (aspectRatio === AppEmbedData_ImageStyles_AspectRatio.SQUARE) {
      containerStyle.width = "100%";
      containerStyle.height = "100%";
      containerStyle.aspectRatio = "1 / 1";
      containerStyle.overflow = "hidden";
    } else if (aspectRatio === AppEmbedData_ImageStyles_AspectRatio.RECTANGLE) {
      containerStyle.width = "100%";
      containerStyle.aspectRatio = "16 / 9";
      containerStyle.overflow = "hidden";
    }
  }
  return {
    className: classNames(baseClass, aspectClass, resizingClass),
    style: containerStyle
  };
};
const generateContainerClassName = (direction, imageStyles, classes) => {
  return classNames(classes[direction], classes.container, classes.cardLayout, {
    [classes.imageTop]: imageStyles?.imagePosition === AppEmbedData_ImageStyles_Position.TOP,
    [classes.imageStart]: imageStyles?.imagePosition === AppEmbedData_ImageStyles_Position.START,
    [classes.imageEnd]: imageStyles?.imagePosition === AppEmbedData_ImageStyles_Position.END,
    [classes.squareRatio]: imageStyles?.aspectRatio === AppEmbedData_ImageStyles_AspectRatio.SQUARE,
    [classes.rectangleRatio]: imageStyles?.aspectRatio === AppEmbedData_ImageStyles_AspectRatio.RECTANGLE
  });
};
const generateContentClasses = (cardStyles, imagePosition, classes) => {
  const alignment = cardStyles?.alignment || AppEmbedData_CardStyles_Alignment.START;
  const isFrameless = cardStyles?.type === AppEmbedData_CardStyles_Type.FRAMELESS;
  return classNames({
    [classes.textStart]: alignment === AppEmbedData_CardStyles_Alignment.START,
    [classes.textCenter]: alignment === AppEmbedData_CardStyles_Alignment.CENTER,
    [classes.textEnd]: alignment === AppEmbedData_CardStyles_Alignment.END,
    [classes.titlePriceStacked]: cardStyles?.titlePriceLayout === TITLE_PRICE_LAYOUT.STACKED,
    [classes.titlePriceSideBySide]: cardStyles?.titlePriceLayout === TITLE_PRICE_LAYOUT.SIDE_BY_SIDE,
    [classes.framelessContent]: isFrameless,
    [classes.framelessImageTop]: isFrameless && imagePosition === AppEmbedData_ImageStyles_Position.TOP,
    [classes.framelessImageStart]: isFrameless && imagePosition === AppEmbedData_ImageStyles_Position.START,
    [classes.framelessImageEnd]: isFrameless && imagePosition === AppEmbedData_ImageStyles_Position.END
  });
};
export {
  TITLE_PRICE_LAYOUT,
  generateContainerClassName,
  generateContentClasses,
  generateImageContainerProps,
  generateVerticalEmbedClasses,
  generateVerticalEmbedStyles
};
//# sourceMappingURL=vertical-embed-styles.js.map
