import { Fragment, jsx } from "react/jsx-runtime";
import { createElement } from "react";
import { colorToString } from "../../../../utils/colorToString";
import Parallax from "../Parallax";
import BackgroundVideo from "../BackgroundVideo";
import { useStyle } from "../../../../../runtimes/react/use-style";
import { useResponsiveStyle } from "../../../../utils/responsive-style";
import { useFrameworkContext } from "../../../../../runtimes/react/components/hooks/use-framework-context";
function getColor(color) {
  if (color == null)
    return "black";
  if (color.swatch == null) {
    return colorToString({ ...color, swatch: { hue: 0, saturation: 0, lightness: 0 } });
  }
  return 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__ */ jsx(Fragment, {});
  return /* @__PURE__ */ jsx(Fragment, { children: backgrounds.map(({ value, deviceId }) => {
    const visibility = backgrounds.map((v) => ({
      deviceId: v.deviceId,
      value: v.deviceId === deviceId
    }));
    return /* @__PURE__ */ jsx(BackgroundDeviceLayer, { layer: value, visibility }, deviceId);
  }) });
}
function BackgroundDeviceLayer({ layer, visibility }) {
  const visibilityStyle = useResponsiveStyle([visibility], ([v]) => ({
    display: v === true ? "block" : "none"
  }));
  return /* @__PURE__ */ jsx("div", { className: useStyle({ ...containerStyle, ...visibilityStyle, overflow: "hidden" }), children: [...layer].reverse().map((bg) => {
    if (bg.type === "color") {
      return /* @__PURE__ */ jsx(ColorBackground, { color: getColor(bg.payload) }, bg.id);
    }
    if (bg.type === "image" && bg.payload) {
      return /* @__PURE__ */ createElement(ImageBackground, { ...bg.payload, key: bg.id });
    }
    if (bg.type === "gradient" && bg.payload) {
      return /* @__PURE__ */ createElement(
        GradientBackground,
        {
          ...bg.payload,
          key: bg.id,
          gradient: getStopsStyle(bg.payload.stops)
        }
      );
    }
    if (bg.type === "video" && bg.payload) {
      return /* @__PURE__ */ createElement(
        VideoBackground,
        {
          ...bg.payload,
          key: bg.id,
          maskColor: getColor(bg.payload.maskColor)
        }
      );
    }
    return null;
  }) });
}
function ColorBackground({ color }) {
  return /* @__PURE__ */ jsx("div", { className: 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 = useStyle(containerStyle);
  const { Image } = useFrameworkContext();
  if (repeat === "no-repeat" && size !== "auto" && publicUrl != null) {
    return /* @__PURE__ */ jsx(Parallax, { strength: parallax, children: (getParallaxProps) => /* @__PURE__ */ jsx("div", { ...getParallaxProps({ style: { opacity, overflow: "hidden" } }), children: /* @__PURE__ */ jsx(
      Image,
      {
        src: publicUrl,
        alt: "",
        fill: true,
        sizes: "100vw",
        style: {
          objectPosition: backgroundPosition,
          objectFit: size
        },
        priority
      }
    ) }) });
  }
  return /* @__PURE__ */ jsx(Parallax, { strength: parallax, children: (getParallaxProps) => /* @__PURE__ */ 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__ */ jsx(
    "div",
    {
      className: 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__ */ jsx(Parallax, { strength: parallax, children: (getParallaxProps) => /* @__PURE__ */ jsx("div", { ...getParallaxProps({ className: useStyle(containerStyle) }), children: /* @__PURE__ */ jsx(
    BackgroundVideo,
    {
      url,
      zoom,
      opacity,
      aspectRatio: getAspectRatio(aspectRatio),
      maskColor
    }
  ) }) });
}
export {
  Backgrounds as default
};
//# sourceMappingURL=index.js.map