import {
  BackgroundBackgroundType,
  ColorSwatchType,
  GradientType,
  ImageOptionsImagePosition,
  ImageScaling
} from "@wix/ambassador-ricos-v1-ricos-conversation/types";
const COLOR_DISPLAY_ORDER = [0, 4, 1, 2, 3, 5, 6, 7, 8];
const reorderColorsForDisplay = (colors) => {
  return COLOR_DISPLAY_ORDER.map((index) => colors[index]).filter(Boolean);
};
function applyColors(design, colors) {
  const oldColors = design?.colorPalette ?? [];
  const isColor0Changed = oldColors[0] !== colors[0];
  const isColor1Changed = oldColors[1] !== colors[1];
  const isColor4Changed = oldColors[4] !== colors[4];
  const isColor5Changed = oldColors[5] !== colors[5];
  return {
    ...design,
    colorPalette: colors,
    ...isColor0Changed && {
      background: createColorBackground(colors[0])
    },
    ...isColor4Changed && {
      typography: {
        heading1: { ...design?.typography?.heading1, color: colors[4] },
        heading2: { ...design?.typography?.heading2, color: colors[4] },
        heading3: { ...design?.typography?.heading3, color: colors[4] },
        heading4: { ...design?.typography?.heading4, color: colors[4] },
        heading5: { ...design?.typography?.heading5, color: colors[4] },
        heading6: { ...design?.typography?.heading6, color: colors[4] },
        paragraph: { ...design?.typography?.paragraph, color: colors[4] }
      }
    },
    ...(isColor0Changed || isColor1Changed) && {
      button: {
        ...design?.button,
        ...isColor1Changed && {
          backgroundColor: colors[1],
          border: { ...design?.button?.border, color: colors[1] }
        },
        ...isColor0Changed && {
          textColor: colors[0]
        },
        hover: {
          ...design?.button?.hover,
          ...isColor1Changed && {
            backgroundColor: colors[1],
            borderColor: colors[1]
          },
          ...isColor0Changed && {
            textColor: colors[0]
          }
        }
      }
    },
    ...isColor5Changed && {
      image: {
        ...design?.image,
        border: {
          color: colors[5]
        }
      }
    }
  };
}
function applyFonts(design, fontGroup) {
  return {
    ...design,
    typography: {
      heading1: {
        ...design?.typography?.heading1,
        fontFamily: fontGroup.headingFontFamily
      },
      heading2: {
        ...design?.typography?.heading2,
        fontFamily: fontGroup.headingFontFamily
      },
      heading3: {
        ...design?.typography?.heading3,
        fontFamily: fontGroup.headingFontFamily
      },
      heading4: {
        ...design?.typography?.heading4,
        fontFamily: fontGroup.headingFontFamily
      },
      heading5: {
        ...design?.typography?.heading5,
        fontFamily: fontGroup.headingFontFamily
      },
      heading6: {
        ...design?.typography?.heading6,
        fontFamily: fontGroup.headingFontFamily
      },
      paragraph: {
        ...design?.typography?.paragraph,
        fontFamily: fontGroup.paragraphFontFamily
      }
    }
  };
}
const createColorBackground = (colorValue) => ({
  type: BackgroundBackgroundType.COLOR,
  colorOptions: {
    color: {
      type: ColorSwatchType.COLOR,
      colorOptions: colorValue
    }
  }
});
const createGradientBackground = (gradientValue) => ({
  type: BackgroundBackgroundType.COLOR,
  colorOptions: {
    color: {
      type: ColorSwatchType.GRADIENT,
      gradientOptions: gradientValue
    }
  }
});
const createImageBackground = (imageUrl, options) => ({
  type: BackgroundBackgroundType.IMAGE,
  imageOptions: {
    url: imageUrl,
    opacity: options?.opacity ?? 1,
    color: options?.overlayColor ? {
      type: ColorSwatchType.COLOR,
      colorOptions: options.overlayColor
    } : void 0,
    scaling: options?.scaling ?? ImageScaling.COVER,
    position: options?.position ?? ImageOptionsImagePosition.CENTER
  }
});
const createColorSwatch = (colorValue) => ({
  type: ColorSwatchType.COLOR,
  colorOptions: colorValue
});
const createGradientSwatch = (gradientValue) => ({
  type: ColorSwatchType.GRADIENT,
  gradientOptions: gradientValue
});
const createSimpleGradient = (startColor, endColor = "#000000") => ({
  type: GradientType.LINEAR,
  stops: [
    { color: startColor, opacity: 1, position: 0 },
    { color: endColor, opacity: 1, position: 1 }
  ],
  linearOptions: 90
});
export {
  COLOR_DISPLAY_ORDER,
  applyColors,
  applyFonts,
  createColorBackground,
  createColorSwatch,
  createGradientBackground,
  createGradientSwatch,
  createImageBackground,
  createSimpleGradient,
  reorderColorsForDisplay
};
//# sourceMappingURL=design-utils.js.map
