import { r as reactExports, j as jsxRuntimeExports, bf as d, d as c, p as s, c as a, q as c$1, u, bd as p, be as n, w as h, t as n$1, v as i, h as m } from "./index-Cr4zbAtA.js";
import { F as ForwardRef$5 } from "./ExclamationTriangleIcon-DBJKiWFf.js";
import { F as ForwardRef$6 } from "./CodeBracketIcon-BsDjbreq.js";
import { F as ForwardRef$7 } from "./ArrowsRightLeftIcon-BIf68FuZ.js";
function ComputerDesktopIcon({
  title,
  titleId,
  ...props
}, svgRef) {
  return /* @__PURE__ */ reactExports.createElement("svg", Object.assign({
    xmlns: "http://www.w3.org/2000/svg",
    fill: "none",
    viewBox: "0 0 24 24",
    strokeWidth: 1.5,
    stroke: "currentColor",
    "aria-hidden": "true",
    "data-slot": "icon",
    ref: svgRef,
    "aria-labelledby": titleId
  }, props), title ? /* @__PURE__ */ reactExports.createElement("title", {
    id: titleId
  }, title) : null, /* @__PURE__ */ reactExports.createElement("path", {
    strokeLinecap: "round",
    strokeLinejoin: "round",
    d: "M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25"
  }));
}
const ForwardRef$4 = reactExports.forwardRef(ComputerDesktopIcon);
function DevicePhoneMobileIcon({
  title,
  titleId,
  ...props
}, svgRef) {
  return /* @__PURE__ */ reactExports.createElement("svg", Object.assign({
    xmlns: "http://www.w3.org/2000/svg",
    fill: "none",
    viewBox: "0 0 24 24",
    strokeWidth: 1.5,
    stroke: "currentColor",
    "aria-hidden": "true",
    "data-slot": "icon",
    ref: svgRef,
    "aria-labelledby": titleId
  }, props), title ? /* @__PURE__ */ reactExports.createElement("title", {
    id: titleId
  }, title) : null, /* @__PURE__ */ reactExports.createElement("path", {
    strokeLinecap: "round",
    strokeLinejoin: "round",
    d: "M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3"
  }));
}
const ForwardRef$3 = reactExports.forwardRef(DevicePhoneMobileIcon);
function DeviceTabletIcon({
  title,
  titleId,
  ...props
}, svgRef) {
  return /* @__PURE__ */ reactExports.createElement("svg", Object.assign({
    xmlns: "http://www.w3.org/2000/svg",
    fill: "none",
    viewBox: "0 0 24 24",
    strokeWidth: 1.5,
    stroke: "currentColor",
    "aria-hidden": "true",
    "data-slot": "icon",
    ref: svgRef,
    "aria-labelledby": titleId
  }, props), title ? /* @__PURE__ */ reactExports.createElement("title", {
    id: titleId
  }, title) : null, /* @__PURE__ */ reactExports.createElement("path", {
    strokeLinecap: "round",
    strokeLinejoin: "round",
    d: "M10.5 19.5h3m-6.75 2.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-15a2.25 2.25 0 0 0-2.25-2.25H6.75A2.25 2.25 0 0 0 4.5 4.5v15a2.25 2.25 0 0 0 2.25 2.25Z"
  }));
}
const ForwardRef$2 = reactExports.forwardRef(DeviceTabletIcon);
function DocumentChartBarIcon({
  title,
  titleId,
  ...props
}, svgRef) {
  return /* @__PURE__ */ reactExports.createElement("svg", Object.assign({
    xmlns: "http://www.w3.org/2000/svg",
    fill: "none",
    viewBox: "0 0 24 24",
    strokeWidth: 1.5,
    stroke: "currentColor",
    "aria-hidden": "true",
    "data-slot": "icon",
    ref: svgRef,
    "aria-labelledby": titleId
  }, props), title ? /* @__PURE__ */ reactExports.createElement("title", {
    id: titleId
  }, title) : null, /* @__PURE__ */ reactExports.createElement("path", {
    strokeLinecap: "round",
    strokeLinejoin: "round",
    d: "M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25M9 16.5v.75m3-3v3M15 12v5.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
  }));
}
const ForwardRef$1 = reactExports.forwardRef(DocumentChartBarIcon);
function DocumentTextIcon({
  title,
  titleId,
  ...props
}, svgRef) {
  return /* @__PURE__ */ reactExports.createElement("svg", Object.assign({
    xmlns: "http://www.w3.org/2000/svg",
    fill: "none",
    viewBox: "0 0 24 24",
    strokeWidth: 1.5,
    stroke: "currentColor",
    "aria-hidden": "true",
    "data-slot": "icon",
    ref: svgRef,
    "aria-labelledby": titleId
  }, props), title ? /* @__PURE__ */ reactExports.createElement("title", {
    id: titleId
  }, title) : null, /* @__PURE__ */ reactExports.createElement("path", {
    strokeLinecap: "round",
    strokeLinejoin: "round",
    d: "M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
  }));
}
const ForwardRef = reactExports.forwardRef(DocumentTextIcon);
function ErrorPanel({
  error
}) {
  return /* @__PURE__ */ jsxRuntimeExports.jsx(d, { className: "min-h-12 w-full", title: "An error occurred", icon: ForwardRef$5, color: "rose", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { children: JSON.stringify(error, void 0, 2) }) });
}
const PREVIEW_DIMENSIONS = [{
  label: "Desktop",
  width: null,
  height: null,
  icon: ForwardRef$4
}, {
  label: "iPhone 12 Pro",
  width: 390 + 2,
  height: 844 + 2,
  icon: ForwardRef$3
}, {
  label: "Pixel 5",
  width: 393 + 2,
  height: 851 + 2,
  icon: ForwardRef$3
}, {
  label: "iPad Air",
  width: 820 + 2,
  height: 1180 + 2,
  icon: ForwardRef$2
}, {
  label: "Surface Pro 7",
  width: 912 + 2,
  height: 1368 + 2,
  icon: ForwardRef$2
}];
function MailPreview({
  html,
  text,
  error,
  additionalTabHeaders,
  additionalTabPanels
}) {
  const iframeRef = reactExports.useRef(null);
  const [selectedTabIndex, setSelectedTabIndex] = reactExports.useState(0);
  const [selectedPreviewDimension, setSelectedPreviewDimension] = reactExports.useState(PREVIEW_DIMENSIONS[0]);
  const [isPreviewHorizontal, setIsPreviewHorizontal] = reactExports.useState(false);
  const [iframeWidth, setIframeWidth] = reactExports.useState("100%");
  const [iframeHeight, setIframeHeight] = reactExports.useState("100%");
  const [iframeContentHeight, setIframeContentHeight] = reactExports.useState(0);
  reactExports.useEffect(() => {
    if (selectedPreviewDimension.label === "Desktop") {
      setIframeWidth("100%");
      setIframeHeight(`${iframeContentHeight}px`);
    } else {
      if (isPreviewHorizontal) {
        setIframeWidth(`${selectedPreviewDimension.height}px`);
        setIframeHeight(`${selectedPreviewDimension.width}px`);
      } else {
        setIframeWidth(`${selectedPreviewDimension.width}px`);
        setIframeHeight(`${selectedPreviewDimension.height}px`);
      }
    }
  }, [selectedPreviewDimension, isPreviewHorizontal, iframeContentHeight]);
  setInterval(() => {
    var _a, _b, _c;
    setIframeContentHeight((((_c = (_b = (_a = iframeRef.current) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document.body) == null ? void 0 : _c.scrollHeight) ?? 0) + 82);
  }, 250);
  const preprocessedHTML = (html == null ? void 0 : html.replace("</head>", `<base target='_blank'><meta http-equiv='Content-Security-Policy' content="script-src 'none'"></head>`)) ?? "";
  if (error) {
    return /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorPanel, { error });
  }
  return /* @__PURE__ */ jsxRuntimeExports.jsx(c, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(s, { index: selectedTabIndex, onIndexChange: setSelectedTabIndex, children: [
    /* @__PURE__ */ jsxRuntimeExports.jsxs(a, { alignItems: "center", className: "space-x-2", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsxs(c$1, { className: "flex-1", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(u, { icon: ForwardRef$1, children: "HTML" }),
        /* @__PURE__ */ jsxRuntimeExports.jsx(u, { icon: ForwardRef, children: "Text" }),
        /* @__PURE__ */ jsxRuntimeExports.jsx(u, { icon: ForwardRef$6, children: "Raw HTML" }),
        additionalTabHeaders ?? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {})
      ] }),
      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end space-x-2", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(p, { value: selectedPreviewDimension.label, onValueChange: (v) => setSelectedPreviewDimension(PREVIEW_DIMENSIONS.find((d2) => d2.label === v) ?? PREVIEW_DIMENSIONS[0]), children: PREVIEW_DIMENSIONS.map((entry) => /* @__PURE__ */ jsxRuntimeExports.jsx(n, { value: entry.label, icon: entry.icon, children: entry.label }, entry.label)) }),
        /* @__PURE__ */ jsxRuntimeExports.jsx(h, { variant: "secondary", onClick: () => setIsPreviewHorizontal(!isPreviewHorizontal), disabled: selectedPreviewDimension.label === "Desktop", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ForwardRef$7, { className: `h-5 w-5 ${isPreviewHorizontal ? "" : "rotate-90"}` }) })
      ] })
    ] }),
    /* @__PURE__ */ jsxRuntimeExports.jsxs(n$1, { children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(i, { children: preprocessedHTML ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { hidden: selectedTabIndex !== 0, className: "overflow-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
        "iframe",
        {
          title: "Mail Preview",
          ref: iframeRef,
          className: "mx-auto border border-gray-600",
          width: iframeWidth,
          height: iframeHeight,
          srcDoc: preprocessedHTML,
          sandbox: "allow-popups allow-popups-to-escape-sandbox allow-same-origin",
          csp: "script-src 'none'"
        }
      ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(m, { className: "w-full pt-4 text-center", children: "No HTML version available" }) }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(i, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(a, { className: "mt-2 overflow-auto", children: text ? /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "text-gray-500 dark:text-gray-600", children: text }) : /* @__PURE__ */ jsxRuntimeExports.jsx(m, { className: "w-full pt-4 text-center", children: "No text version available" }) }) }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(i, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(a, { className: "mt-2 overflow-auto", children: html ? /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "text-gray-500 dark:text-gray-600", children: html }) : /* @__PURE__ */ jsxRuntimeExports.jsx(m, { className: "w-full pt-4 text-center", children: "No HTML version available" }) }) }),
      (additionalTabPanels == null ? void 0 : additionalTabPanels.map((panel, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(i, { children: panel }, index))) ?? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {})
    ] })
  ] }) });
}
export {
  MailPreview as M
};
