"use client";
import { useId, useRef, useEffect } from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { useOnClickOutside } from '@opensite/hooks/useOnClickOutside';
import { jsx, jsxs } from 'react/jsx-runtime';

function cn(...inputs) {
  return twMerge(clsx(inputs));
}
var sizeStyles = {
  sm: "max-w-md",
  md: "max-w-2xl",
  lg: "max-w-4xl",
  xl: "max-w-5xl",
  full: "max-w-7xl",
  compact: "max-w-[700px]"
};
var dialogTransition = {
  duration: 0.35,
  ease: [0.16, 1, 0.3, 1]
};
function AnimatedDialog({
  open,
  onOpenChange,
  title,
  eyebrow,
  description,
  children,
  header,
  footer,
  size = "lg",
  className,
  contentClassName,
  featuredMediaHeader
}) {
  const titleId = useId();
  const descriptionId = useId();
  const containerRef = useRef(null);
  useOnClickOutside(containerRef, () => {
    if (open) {
      onOpenChange(false);
    }
  });
  useEffect(() => {
    if (!open) {
      return;
    }
    const onKeyDown = (event) => {
      if (event.key === "Escape") {
        onOpenChange(false);
      }
    };
    const previousOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    window.addEventListener("keydown", onKeyDown);
    return () => {
      document.body.style.overflow = previousOverflow;
      window.removeEventListener("keydown", onKeyDown);
    };
  }, [open, onOpenChange]);
  return /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 h-screen overflow-y-auto", children: [
    /* @__PURE__ */ jsx(
      motion.div,
      {
        initial: { opacity: 0 },
        animate: { opacity: 1, transition: dialogTransition },
        exit: { opacity: 0, transition: dialogTransition },
        className: "fixed inset-0 h-full w-full bg-foreground/80 backdrop-blur-lg"
      }
    ),
    /* @__PURE__ */ jsxs(
      motion.div,
      {
        initial: { opacity: 0, y: 24, scale: 0.98 },
        animate: {
          opacity: 1,
          y: 0,
          scale: 1,
          transition: dialogTransition
        },
        exit: {
          opacity: 0,
          y: 12,
          scale: 0.98,
          transition: dialogTransition
        },
        ref: containerRef,
        role: "dialog",
        "aria-modal": "true",
        "aria-labelledby": title ? titleId : void 0,
        "aria-describedby": description ? descriptionId : void 0,
        className: cn(
          "relative z-60 mx-auto my-12 flex w-[92vw] max-h-[85vh] flex-col overflow-hidden rounded-3xl bg-background shadow-2xl ring-1 ring-border/10",
          size === "compact" ? "p-0 md:my-20" : "p-6 md:my-20 md:p-12",
          sizeStyles[size],
          className
        ),
        children: [
          featuredMediaHeader ? /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden", children: [
            featuredMediaHeader,
            /* @__PURE__ */ jsx(
              "button",
              {
                type: "button",
                "aria-label": "Close dialog",
                className: "absolute right-4 top-4 z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-foreground/90 text-background backdrop-blur-sm transition hover:bg-foreground md:h-11 md:w-11",
                onClick: () => onOpenChange(false),
                children: /* @__PURE__ */ jsx(
                  "svg",
                  {
                    xmlns: "http://www.w3.org/2000/svg",
                    width: "24",
                    height: "24",
                    viewBox: "0 0 24 24",
                    children: /* @__PURE__ */ jsx(
                      "path",
                      {
                        fill: "none",
                        stroke: "currentColor",
                        strokeLinecap: "round",
                        strokeLinejoin: "round",
                        strokeWidth: "2",
                        d: "M18 6L6 18M6 6l12 12"
                      }
                    )
                  }
                )
              }
            )
          ] }) : null,
          /* @__PURE__ */ jsxs(
            "div",
            {
              className: cn(
                "flex items-start justify-between gap-8",
                size === "compact" && featuredMediaHeader ? "px-6 pt-6 md:px-8 md:pt-8" : "",
                !featuredMediaHeader ? "" : ""
              ),
              children: [
                header ? header : /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
                  eyebrow ? /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-[0.3em] text-primary", children: eyebrow }) : null,
                  title ? /* @__PURE__ */ jsx(
                    "h2",
                    {
                      id: titleId,
                      className: "text-2xl font-semibold text-foreground md:text-4xl",
                      children: title
                    }
                  ) : null,
                  description ? /* @__PURE__ */ jsx(
                    "p",
                    {
                      id: descriptionId,
                      className: "text-sm text-muted-foreground md:text-base",
                      children: description
                    }
                  ) : null
                ] }),
                !featuredMediaHeader ? /* @__PURE__ */ jsx(
                  "button",
                  {
                    type: "button",
                    "aria-label": "Close dialog",
                    className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-foreground text-background transition hover:bg-foreground/80 md:h-11 md:w-11",
                    onClick: () => onOpenChange(false),
                    children: /* @__PURE__ */ jsx(
                      "svg",
                      {
                        xmlns: "http://www.w3.org/2000/svg",
                        width: "24",
                        height: "24",
                        viewBox: "0 0 24 24",
                        children: /* @__PURE__ */ jsx(
                          "path",
                          {
                            fill: "none",
                            stroke: "currentColor",
                            strokeLinecap: "round",
                            strokeLinejoin: "round",
                            strokeWidth: "2",
                            d: "M18 6L6 18M6 6l12 12"
                          }
                        )
                      }
                    )
                  }
                ) : null
              ]
            }
          ),
          children ? /* @__PURE__ */ jsx(
            "div",
            {
              className: cn(
                "flex-1 min-h-0 overflow-y-auto",
                size === "compact" && featuredMediaHeader ? "mt-6 px-6 pb-6 md:mt-8 md:px-8 md:pb-8" : "mt-8 pr-2 md:mt-10",
                contentClassName
              ),
              children
            }
          ) : null,
          footer ? /* @__PURE__ */ jsx(
            "div",
            {
              className: cn(
                size === "compact" && featuredMediaHeader ? "px-6 pb-6 md:px-8 md:pb-8" : "mt-8 md:mt-10"
              ),
              children: footer
            }
          ) : null
        ]
      }
    )
  ] }) : null });
}

export { AnimatedDialog };
