"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var design_to_ricos_theme_exports = {};
__export(design_to_ricos_theme_exports, {
  designToRicosTheme: () => designToRicosTheme
});
module.exports = __toCommonJS(design_to_ricos_theme_exports);
var import_types = require("@wix/ambassador-ricos-v1-ricos-conversation/types");
var import_resolve_backward_compat_overlay = require("./../_shared/resolve-backward-compat-overlay.js");
var import_calculate_clamp = require("./calculate-clamp.js");
var import_color_utils = require("./color-utils.js");
var import_gradient_to_background_image = require("./gradient-to-background-image.js");
const toNumber = (value) => {
  if (value === void 0 || value === null) {
    return void 0;
  }
  const parsed = typeof value === "string" ? parseFloat(value) : value;
  return isNaN(parsed) ? void 0 : parsed;
};
const designColorPaletteToRicosPalette = (colorPalette) => {
  if (!colorPalette) {
    return void 0;
  }
  const bgColor = colorPalette[0];
  const textColor = colorPalette[4];
  const [calcShade1, calcShade2, calcShade3] = bgColor && textColor ? (0, import_color_utils.calculateShades)(bgColor, textColor) : [];
  return {
    format: "color",
    bgColor,
    accent1: colorPalette[1],
    accent2: colorPalette[2],
    accent3: colorPalette[3],
    textColor,
    accent4: colorPalette[5],
    shade1: colorPalette[6] ?? calcShade1,
    shade2: colorPalette[7] ?? calcShade2,
    shade3: colorPalette[8] ?? calcShade3
  };
};
const designToRicosTheme = (design, getHorizontalPaddingForBreakout, fluidFontSizeStrategy, isPagesEnabled) => {
  const typography = design?.typography;
  const image = design?.image;
  fluidFontSizeStrategy = fluidFontSizeStrategy ?? "none";
  const fontToRicosFont = (key) => {
    const size = toNumber(typography?.[key]?.size);
    const paragraphSize = toNumber(typography?.paragraph?.size);
    const weight = toNumber(typography?.[key]?.weight);
    const lineHeight = toNumber(typography?.[key]?.lineHeight);
    const letterSpacing = toNumber(typography?.[key]?.letterSpacing);
    const responsiveFontSize = fluidFontSizeStrategy !== "none" && size ? (0, import_calculate_clamp.calculateClamp)({
      maxSize: size,
      minSize: Math.max(paragraphSize ?? 0, size * import_calculate_clamp.MIN_FONT_SIZE_RATIO),
      relativeTo: fluidFontSizeStrategy === "vw" ? "viewport" : "container"
    }) : void 0;
    return {
      fontFamily: typography?.[key]?.fontFamily ?? void 0,
      fontWeight: weight !== void 0 ? `${weight}` : void 0,
      color: typography?.[key]?.color ?? void 0,
      fontSize: fluidFontSizeStrategy === "none" ? size ? `${size}px` : void 0 : responsiveFontSize,
      lineHeight: lineHeight ?? void 0,
      letterSpacing: letterSpacing !== void 0 ? `${letterSpacing}em` : void 0
    };
  };
  const getDefaultHorizontalPaddingForBreakout = (contentWidth) => {
    switch (contentWidth) {
      case import_types.HorizontalPaddingType.SMALL:
        return "128px";
      case import_types.HorizontalPaddingType.MEDIUM:
        return "80px";
      case import_types.HorizontalPaddingType.LARGE:
        return "40px";
      default:
        return "80px";
    }
  };
  const horizontalPadding = (getHorizontalPaddingForBreakout ?? getDefaultHorizontalPaddingForBreakout)(design?.pageSetup?.horizontalPadding);
  const getVerticalPaddingValue = (padding, side) => {
    switch (padding) {
      case import_types.VerticalPaddingType.NONE:
        return side === "end" ? "16px" : "0px";
      case import_types.VerticalPaddingType.SMALL:
        return side === "end" ? "16px" : "10px";
      case import_types.VerticalPaddingType.MEDIUM:
        return "26px";
      case import_types.VerticalPaddingType.LARGE:
        return "52px";
      default:
        return side === "end" ? "16px" : "0px";
    }
  };
  const verticalPaddingStart = getVerticalPaddingValue(design?.pageSetup?.verticalPadding, "start");
  const verticalPaddingEnd = getVerticalPaddingValue(design?.pageSetup?.verticalPadding, "end");
  const getCardStyle = () => {
    const commonProps = {
      selectionBorderColor: "var(--bounding-box-color, rgba(0, 102, 255, 0.4))",
      selectionBorderWidth: "calc(var(--reverse-zoom-ratio) * 2px)",
      selectionActiveColor: "var(--selection-color, #2F5DFF)",
      paddingBlockStart: verticalPaddingStart,
      paddingBlockEnd: verticalPaddingEnd
    };
    if (design?.background?.type === import_types.BackgroundBackgroundType.IMAGE) {
      const imageOptions = design.background?.imageOptions;
      const overlayColorType = imageOptions?.color?.type;
      let backgroundImageOverlay;
      if (overlayColorType === import_types.ColorSwatchType.COLOR && imageOptions?.color?.colorOptions) {
        const resolved = (0, import_resolve_backward_compat_overlay.resolveBackwardCompatOverlay)(
          imageOptions.color.colorOptions,
          imageOptions.opacity ?? 1,
          1
        );
        backgroundImageOverlay = (0, import_color_utils.hexToRgba)(resolved);
      } else if (overlayColorType === import_types.ColorSwatchType.GRADIENT) {
        backgroundImageOverlay = (0, import_gradient_to_background_image.gradientToBackgroundImage)(imageOptions?.color?.gradientOptions);
      }
      return {
        ...commonProps,
        backgroundImage: imageOptions?.url ? `url(${imageOptions.url})` : void 0,
        backgroundSize: imageOptions?.scaling?.toLowerCase() || "cover",
        backgroundPosition: imageOptions?.position?.toLowerCase().split("_").join(" ") || "center",
        backgroundImageOverlay
      };
    }
    if (design?.background?.type === import_types.BackgroundBackgroundType.COLOR) {
      if (design?.background?.colorOptions?.color?.type === import_types.ColorSwatchType.COLOR) {
        return {
          ...commonProps,
          backgroundColor: (0, import_color_utils.hexToRgba)(
            design.background.colorOptions?.color?.colorOptions ?? void 0
          )
        };
      }
      if (design?.background?.colorOptions?.color?.type === import_types.ColorSwatchType.GRADIENT) {
        return {
          ...commonProps,
          backgroundGradient: (0, import_gradient_to_background_image.gradientToBackgroundImage)(
            design.background?.colorOptions?.color?.gradientOptions
          )
        };
      }
    }
    return {
      ...commonProps,
      backgroundColor: design?.colorPalette?.[0]
    };
  };
  return {
    colorPalette: designColorPaletteToRicosPalette(design?.colorPalette),
    typography: {
      fontFamily: typography?.paragraph?.fontFamily ?? void 0
    },
    customStyles: {
      h1: fontToRicosFont("heading1"),
      h2: fontToRicosFont("heading2"),
      h3: fontToRicosFont("heading3"),
      h4: fontToRicosFont("heading4"),
      h5: fontToRicosFont("heading5"),
      h6: fontToRicosFont("heading6"),
      p: fontToRicosFont("paragraph"),
      quote: {
        borderColor: design?.colorPalette?.[1]
      },
      link: {
        color: design?.colorPalette?.[1]
      },
      hashtag: {
        color: design?.colorPalette?.[1]
      },
      button: {
        color: design?.button?.textColor ?? void 0,
        backgroundColor: (0, import_color_utils.hexToRgba)(design?.button?.backgroundColor ?? void 0),
        buttonSize: design?.button?.size === import_types.ButtonSize.SMALL ? "small" : design?.button?.size === import_types.ButtonSize.LARGE ? "large" : design?.button?.size === import_types.ButtonSize.MEDIUM ? "medium" : void 0,
        borderRadius: design?.button?.border?.radius ? `${design?.button?.border?.radius}px` : void 0,
        borderWidth: design?.button?.border?.width ? `${design?.button?.border?.width}px` : void 0,
        borderColor: (0, import_color_utils.hexToRgba)(design?.button?.border?.color ?? void 0),
        colorHover: design?.button?.hover?.textColor ?? void 0,
        backgroundColorHover: (0, import_color_utils.hexToRgba)(design?.button?.hover?.backgroundColor ?? void 0),
        borderColorHover: (0, import_color_utils.hexToRgba)(design?.button?.hover?.borderColor ?? void 0)
      },
      codeBlock: {
        color: design?.colorPalette?.[4],
        backgroundColor: design?.colorPalette?.[2]
      },
      table: {
        backgroundColor: design?.colorPalette?.[0],
        borderColor: design?.colorPalette?.[2]
      },
      audio: {
        titleColor: design?.colorPalette?.[4],
        subtitleColor: design?.colorPalette?.[3],
        backgroundColor: design?.colorPalette?.[0],
        borderColor: design?.colorPalette?.[2],
        actionColor: design?.colorPalette?.[1],
        actionTextColor: design?.colorPalette?.[0]
      },
      file: {
        color: design?.colorPalette?.[4],
        backgroundColor: design?.colorPalette?.[0],
        borderColor: design?.colorPalette?.[2],
        iconColor: design?.colorPalette?.[1],
        iconStrokeColor: design?.colorPalette?.[2]
      },
      verticalEmbed: {
        color: design?.colorPalette?.[4],
        backgroundColor: design?.colorPalette?.[0],
        borderColor: design?.colorPalette?.[2]
      },
      toc: {
        color: design?.colorPalette?.[1],
        titleColor: design?.colorPalette?.[4],
        borderColor: design?.colorPalette?.[2]
      },
      mention: { color: design?.colorPalette?.[1], backgroundColor: "none" },
      ...isPagesEnabled ? { card: getCardStyle() } : {},
      image: {
        borderColor: (0, import_color_utils.hexToRgba)(design?.image?.border?.color ?? void 0),
        borderWidth: image?.border?.width ? `${image?.border?.width}px` : void 0,
        borderRadius: image?.border?.radius ? `${image?.border?.radius}px` : void 0
      },
      editor: {
        maxHeight: "100%",
        addPluginButton: {
          positionInlineStart: "4px"
        }
      },
      container: isPagesEnabled ? {} : {
        paddingBlockStart: verticalPaddingStart,
        paddingBlockEnd: verticalPaddingEnd
      },
      footerToolbar: {
        marginTop: "2px",
        paddingInlineStart: "10px",
        paddingInlineEnd: "10px"
      }
    },
    breakout: {
      rule: ({ node }) => {
        if (node.type === "LAYOUT") {
          return "fullWidth";
        }
        if (["IMAGE", "GALLERY", "VIDEO", "GIF", "SHAPE"].includes(node.type) && node) {
          const containerData = node.type === "IMAGE" ? node.imageData?.containerData : node.type === "GALLERY" ? node.galleryData?.containerData : node.type === "VIDEO" ? node.videoData?.containerData : node.type === "GIF" ? node.gifData?.containerData : node.shapeData?.containerData;
          if (containerData?.width?.size === "FULL_WIDTH") {
            return "fullWidth";
          }
          return "normal";
        }
        return "normal";
      },
      normalPadding: {
        start: horizontalPadding,
        end: horizontalPadding
      },
      fullWidthPadding: {
        start: "0",
        end: "0"
      }
    }
  };
};
//# sourceMappingURL=design-to-ricos-theme.js.map
