"use client";
import { jsx } from "react/jsx-runtime";
import { useState, useEffect, forwardRef } from "react";
import { findBreakpointOverride } from "@makeswift/controls";
import { placeholders } from "../../utils/placeholders";
import { Link } from "../../shared/Link";
import { cx } from "@emotion/css";
import { useStyle } from "../../../runtimes/react/use-style";
import { useResponsiveStyle, useResponsiveWidth } from "../../utils/responsive-style";
import { useFile } from "../../../runtimes/react/hooks/makeswift-api";
import { useBreakpoints } from "../../../runtimes/react/hooks/use-breakpoints";
import { useFrameworkContext } from "../../../runtimes/react/components/hooks/use-framework-context";
import { match, P } from "ts-pattern";
function loadImage(src) {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.onload = () => resolve(image);
    image.onerror = reject;
    image.src = src;
  });
}
function imageSizes(breakpoints, width) {
  const baseDevice = breakpoints.find((breakpoint) => breakpoint.maxWidth == null);
  const baseWidth = baseDevice && width && findBreakpointOverride(breakpoints, width, baseDevice.id);
  const baseWidthSize = baseWidth == null || baseWidth.value.unit !== "px" ? "100vw" : `${baseWidth.value.value}px`;
  return breakpoints.map((breakpoint) => {
    const override = findBreakpointOverride(breakpoints, width, breakpoint.id);
    if (override == null || breakpoint.maxWidth == null || override.value.unit !== "px") {
      return null;
    }
    return `(max-width: ${breakpoint.maxWidth}px) ${Math.min(
      breakpoint.maxWidth,
      override.value.value
    )}px`;
  }).filter((size) => size != null).reduce((sourceSizes, sourceSize) => `${sourceSize}, ${sourceSizes}`, baseWidthSize);
}
const ImageComponent = forwardRef(function Image2({
  id,
  width,
  margin,
  padding,
  file,
  border,
  borderRadius,
  altText,
  link,
  opacity,
  boxShadow,
  placeholder = placeholders.image,
  className,
  priority
}, ref) {
  const fileId = match(file).with(P.string, (v) => v).with({ type: "makeswift-file", version: 1 }, (v) => v.id).otherwise(() => null);
  const fileData = useFile(fileId);
  const imageSrc = match([file, fileData]).with([P.any, P.not(P.nullish)], ([, fileData2]) => fileData2.publicUrl).with([{ type: "external-file", version: 1 }, P.any], ([file2]) => file2.url).otherwise(() => placeholder.src);
  const dataDimensions = match([file, fileData, imageSrc]).with(
    [{ type: "external-file", version: 1, width: P.number, height: P.number }, P.any, P.any],
    ([externalFile]) => ({ width: externalFile.width, height: externalFile.height })
  ).with([P.any, P.not(P.nullish), P.any], ([, data]) => data.dimensions).with([P.any, P.any, placeholder.src], () => placeholder.dimensions).otherwise(() => null);
  const [measuredDimensions, setMeasuredDimensions] = useState(null);
  const breakpoints = useBreakpoints();
  useEffect(() => {
    if (dataDimensions)
      return;
    let cleanedUp = false;
    loadImage(imageSrc).then((image) => {
      if (!cleanedUp) {
        setMeasuredDimensions({ width: image.naturalWidth, height: image.naturalHeight });
      }
    }).catch(console.error);
    return () => {
      cleanedUp = true;
    };
  }, [dataDimensions, imageSrc]);
  const dimensions = dataDimensions ?? measuredDimensions;
  const Container = link ? Link : "div";
  const containerClassName = cx(
    useStyle({ lineHeight: 0, overflow: "hidden" }),
    useStyle(useResponsiveWidth(width, dimensions?.width)),
    useStyle(useResponsiveStyle([opacity], ([opacity2 = 1]) => ({ opacity: opacity2 }))),
    margin,
    padding,
    border,
    borderRadius,
    boxShadow,
    className
  );
  const { Image: Image3 } = useFrameworkContext();
  if (!dimensions)
    return null;
  return /* @__PURE__ */ jsx(Container, { link, ref, id, className: containerClassName, children: /* @__PURE__ */ jsx(
    Image3,
    {
      src: imageSrc,
      priority,
      sizes: imageSizes(breakpoints, width),
      alt: altText ?? "",
      width: dimensions.width,
      height: dimensions.height,
      style: {
        width: "100%",
        height: "auto"
      }
    }
  ) });
});
var Image_default = ImageComponent;
export {
  Image_default as default
};
//# sourceMappingURL=Image.js.map