import { Img } from '@page-speed/img';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
import { jsxs, jsx } from 'react/jsx-runtime';

// components/ui/media-aspect-ratio.tsx
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
function AspectRatio({
  ...props
}) {
  return /* @__PURE__ */ jsx(AspectRatioPrimitive.Root, { "data-slot": "aspect-ratio", ...props });
}
var DEFAULT_DEVICE_ASPECT_RATIOS = {
  desktop: "square",
  mobile: "square"
};
var DEFAULT_MEDIA_CLASS_NAME = "size-full object-cover";
var DEFAULT_FRAME_CLASS_NAME = "overflow-hidden";
var DEFAULT_BREAKPOINT = "lg";
var BREAKPOINT_VISIBILITY_CLASSES = {
  sm: {
    desktop: "hidden sm:block",
    mobile: "sm:hidden"
  },
  md: {
    desktop: "hidden md:block",
    mobile: "md:hidden"
  },
  lg: {
    desktop: "hidden lg:block",
    mobile: "lg:hidden"
  },
  xl: {
    desktop: "hidden xl:block",
    mobile: "xl:hidden"
  },
  "2xl": {
    desktop: "hidden 2xl:block",
    mobile: "2xl:hidden"
  }
};
var MEDIA_ASPECT_RATIOS = {
  square: 1,
  horizontal: 16 / 9,
  vertical: 355 / 520
};
function resolveAspectRatio(ratio, fallback) {
  const resolvedRatio = ratio ?? fallback;
  if (typeof resolvedRatio === "number" && Number.isFinite(resolvedRatio) && resolvedRatio > 0) {
    return resolvedRatio;
  }
  return MEDIA_ASPECT_RATIOS[resolvedRatio];
}
function hasRenderableMedia(mediaItem) {
  return Boolean(mediaItem?.image?.src || mediaItem?.video?.src);
}
function renderMediaElement({
  mediaItem,
  optixFlowConfig,
  mediaClassName,
  imageClassName,
  videoClassName
}) {
  if (!hasRenderableMedia(mediaItem)) {
    return null;
  }
  if (mediaItem.video?.src) {
    const { className: inlineVideoClassName, poster, ...videoProps } = mediaItem.video;
    const posterFallback = poster ?? (typeof mediaItem.image?.src === "string" ? mediaItem.image.src : void 0);
    return /* @__PURE__ */ jsx(
      "video",
      {
        ...videoProps,
        poster: posterFallback,
        className: cn(
          DEFAULT_MEDIA_CLASS_NAME,
          mediaClassName,
          videoClassName,
          inlineVideoClassName
        )
      }
    );
  }
  if (mediaItem.image?.src) {
    const { className: inlineImageClassName, alt, src, ...imageProps } = mediaItem.image;
    return /* @__PURE__ */ jsx(
      Img,
      {
        ...imageProps,
        src,
        alt: alt ?? "",
        className: cn(
          DEFAULT_MEDIA_CLASS_NAME,
          mediaClassName,
          imageClassName,
          inlineImageClassName
        ),
        optixFlowConfig
      }
    );
  }
  return null;
}
function MediaAspectRatio({
  containerClassName,
  mobileClassName,
  desktopClassName,
  frameClassName,
  mobileFrameClassName,
  desktopFrameClassName,
  mediaClassName,
  imageClassName,
  videoClassName,
  mediaItem,
  optixFlowConfig,
  deviceAspectRatios = DEFAULT_DEVICE_ASPECT_RATIOS,
  breakpoint = DEFAULT_BREAKPOINT
}) {
  if (!hasRenderableMedia(mediaItem)) {
    return null;
  }
  const ratios = {
    desktop: resolveAspectRatio(
      deviceAspectRatios.desktop,
      DEFAULT_DEVICE_ASPECT_RATIOS.desktop
    ),
    mobile: resolveAspectRatio(
      deviceAspectRatios.mobile,
      DEFAULT_DEVICE_ASPECT_RATIOS.mobile
    )
  };
  const sharedFrameClassName = cn(
    DEFAULT_FRAME_CLASS_NAME,
    frameClassName,
    mediaItem.containerClassName
  );
  const visibilityClasses = BREAKPOINT_VISIBILITY_CLASSES[breakpoint];
  return /* @__PURE__ */ jsxs("div", { className: containerClassName, "data-slot": "media-aspect-ratio", children: [
    /* @__PURE__ */ jsx("div", { className: cn("relative", visibilityClasses.mobile, mobileClassName), children: /* @__PURE__ */ jsx(
      AspectRatio,
      {
        ratio: ratios.mobile,
        className: cn(sharedFrameClassName, mobileFrameClassName),
        children: renderMediaElement({
          mediaItem,
          optixFlowConfig,
          mediaClassName,
          imageClassName,
          videoClassName
        })
      }
    ) }),
    /* @__PURE__ */ jsx(
      "div",
      {
        className: cn(visibilityClasses.desktop, desktopClassName),
        style: { aspectRatio: String(ratios.desktop) },
        children: /* @__PURE__ */ jsx(
          "div",
          {
            className: cn("size-full", sharedFrameClassName, desktopFrameClassName),
            "data-slot": "media-aspect-ratio-frame",
            children: renderMediaElement({
              mediaItem,
              optixFlowConfig,
              mediaClassName,
              imageClassName,
              videoClassName
            })
          }
        )
      }
    )
  ] });
}

export { MEDIA_ASPECT_RATIOS, MediaAspectRatio };
