"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Backgrounds_exports = {};
__export(Backgrounds_exports, {
  default: () => Backgrounds
});
module.exports = __toCommonJS(Backgrounds_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_react = require("react");
var import_colorToString = require("../../../../utils/colorToString");
var import_Parallax = __toESM(require("../Parallax"));
var import_BackgroundVideo = __toESM(require("../BackgroundVideo"));
var import_use_style = require("../../../../../runtimes/react/use-style");
var import_responsive_style = require("../../../../utils/responsive-style");
var import_use_framework_context = require("../../../../../runtimes/react/components/hooks/use-framework-context");
function getColor(color) {
  if (color == null)
    return "black";
  if (color.swatch == null) {
    return (0, import_colorToString.colorToString)({ ...color, swatch: { hue: 0, saturation: 0, lightness: 0 } });
  }
  return (0, import_colorToString.colorToString)(color);
}
const getStopsStyle = (stops) => stops.map(({ color, location }) => `${getColor(color)} ${location}%`).join(",");
const absoluteFillStyle = {
  position: "absolute",
  top: 0,
  right: 0,
  bottom: 0,
  left: 0
};
const containerStyle = {
  ...absoluteFillStyle,
  borderRadius: "inherit"
};
function Backgrounds({ backgrounds }) {
  if (backgrounds == null)
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: backgrounds.map(({ value, deviceId }) => {
    const visibility = backgrounds.map((v) => ({
      deviceId: v.deviceId,
      value: v.deviceId === deviceId
    }));
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BackgroundDeviceLayer, { layer: value, visibility }, deviceId);
  }) });
}
function BackgroundDeviceLayer({ layer, visibility }) {
  const visibilityStyle = (0, import_responsive_style.useResponsiveStyle)([visibility], ([v]) => ({
    display: v === true ? "block" : "none"
  }));
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_use_style.useStyle)({ ...containerStyle, ...visibilityStyle, overflow: "hidden" }), children: [...layer].reverse().map((bg) => {
    if (bg.type === "color") {
      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColorBackground, { color: getColor(bg.payload) }, bg.id);
    }
    if (bg.type === "image" && bg.payload) {
      return /* @__PURE__ */ (0, import_react.createElement)(ImageBackground, { ...bg.payload, key: bg.id });
    }
    if (bg.type === "gradient" && bg.payload) {
      return /* @__PURE__ */ (0, import_react.createElement)(
        GradientBackground,
        {
          ...bg.payload,
          key: bg.id,
          gradient: getStopsStyle(bg.payload.stops)
        }
      );
    }
    if (bg.type === "video" && bg.payload) {
      return /* @__PURE__ */ (0, import_react.createElement)(
        VideoBackground,
        {
          ...bg.payload,
          key: bg.id,
          maskColor: getColor(bg.payload.maskColor)
        }
      );
    }
    return null;
  }) });
}
function ColorBackground({ color }) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_use_style.useStyle)({ ...containerStyle, backgroundColor: color }) });
}
const ImageBackgroundRepeat = {
  NoRepeat: "no-repeat",
  RepeatX: "repeat-x",
  RepeatY: "repeat-y",
  Repeat: "repeat"
};
const ImageBackgroundSize = {
  Cover: "cover",
  Contain: "contain",
  Auto: "auto"
};
function ImageBackground({
  publicUrl,
  position,
  repeat = ImageBackgroundRepeat.NoRepeat,
  size = ImageBackgroundSize.Cover,
  opacity,
  parallax,
  priority
}) {
  const backgroundPosition = `${position.x}% ${position.y}%`;
  const containerClassName = (0, import_use_style.useStyle)(containerStyle);
  const { Image } = (0, import_use_framework_context.useFrameworkContext)();
  if (repeat === "no-repeat" && size !== "auto" && publicUrl != null) {
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Parallax.default, { strength: parallax, children: (getParallaxProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...getParallaxProps({ style: { opacity, overflow: "hidden" } }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      Image,
      {
        src: publicUrl,
        alt: "",
        fill: true,
        sizes: "100vw",
        style: {
          objectPosition: backgroundPosition,
          objectFit: size
        },
        priority
      }
    ) }) });
  }
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Parallax.default, { strength: parallax, children: (getParallaxProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    "div",
    {
      className: containerClassName,
      ...getParallaxProps({
        style: {
          backgroundImage: publicUrl != null ? `url('${publicUrl}')` : void 0,
          backgroundPosition,
          backgroundRepeat: repeat,
          backgroundSize: size,
          opacity
        }
      })
    }
  ) });
}
function GradientBackground({
  gradient,
  isRadial = false,
  angle = Math.PI
}) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    "div",
    {
      className: (0, import_use_style.useStyle)({
        ...containerStyle,
        background: isRadial ? `radial-gradient(${gradient})` : `linear-gradient(${angle}rad, ${gradient})`
      })
    }
  );
}
const BackgroundVideoAspectRatio = {
  Wide: "wide",
  Standard: "standard"
};
function getAspectRatio(aspectRatio) {
  switch (aspectRatio) {
    case "wide":
      return 16 / 9;
    case "standard":
      return 4 / 3;
    default:
      return 16 / 9;
  }
}
function VideoBackground({
  url,
  aspectRatio,
  maskColor,
  zoom,
  opacity,
  parallax
}) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Parallax.default, { strength: parallax, children: (getParallaxProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...getParallaxProps({ className: (0, import_use_style.useStyle)(containerStyle) }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_BackgroundVideo.default,
    {
      url,
      zoom,
      opacity,
      aspectRatio: getAspectRatio(aspectRatio),
      maskColor
    }
  ) }) });
}
//# sourceMappingURL=index.js.map