import { u as A, b3 as J, e as L, b as Q, x as W, j as e, M as Y, z as Z, D as v, b4 as _, K as H, E as R } from "./index-c65ca4a4.mjs";
import { M as T, D as B } from "./MobileChrome-2e9f6901.mjs";
const le = ({
  testId: M,
  title: C,
  titleHeadingLevel: D = 4,
  size: $ = "full",
  sidebar: f = "",
  preview: l,
  dirty: i = !1,
  cancelLabel: z = "Cancel",
  okLabel: E = "OK",
  okColor: G = "black",
  previewToolbar: m = !0,
  leftToolbar: O = !0,
  rightToolbar: S = !0,
  deviceSelector: a = !0,
  previewToolbarURLs: b,
  previewBgColor: o = "grey",
  selectedURL: h,
  previewToolbarTabs: u,
  buttonsDisabled: g,
  sidebarButtons: n,
  sidebarHeader: c,
  sidebarPadding: I = !0,
  sidebarContentClasses: j,
  onCancel: p,
  onOk: K,
  afterClose: s,
  onSelectURL: y,
  onSelectDesktopView: P,
  onSelectMobileView: V
}) => {
  const F = A(), { setGlobalDirtyState: k } = J();
  L(() => {
    k(i);
  }, [i, k]);
  const [t, w] = Q("desktop");
  if (t === "mobile" && a ? l = /* @__PURE__ */ e.jsx(T, { "data-testid": "preview-mobile", children: l }) : t === "desktop" && a && (l = /* @__PURE__ */ e.jsx(B, { "data-testid": "preview-desktop", children: l })), m) {
    let d = /* @__PURE__ */ e.jsx(e.Fragment, {});
    b ? d = /* @__PURE__ */ e.jsx(H, { options: b, selectedOption: h, onSelect: y }) : u && (d = /* @__PURE__ */ e.jsx(
      R,
      {
        border: !1,
        selectedTab: h,
        tabs: u,
        width: "wide",
        onTabChange: y
      }
    ));
    const N = "text-grey-500", X = a && /* @__PURE__ */ e.jsx(
      v,
      {
        buttons: [
          {
            icon: "laptop",
            label: "Desktop",
            hideLabel: !0,
            link: !0,
            size: "sm",
            iconColorClass: t === "desktop" ? "text-black" : N,
            onClick: P || (() => {
              w("desktop");
            })
          },
          {
            icon: "mobile",
            label: "Mobile",
            hideLabel: !0,
            link: !0,
            size: "sm",
            iconColorClass: t === "mobile" ? "text-black" : N,
            onClick: V || (() => {
              w("mobile");
            })
          }
        ]
      }
    );
    let x = "";
    o === "grey" ? x = "bg-grey-50" : o === "greygradient" && (x = "bg-gradient-to-tr from-white to-[#f9f9fa]");
    const q = W(
      "min-w-100 absolute inset-y-0 left-0 right-[400px] flex grow flex-col overflow-y-scroll",
      x
    );
    l = /* @__PURE__ */ e.jsxs("div", { className: q, children: [
      m && /* @__PURE__ */ e.jsxs("header", { className: "relative flex h-[74px] shrink-0 items-center justify-center px-3 py-5", "data-testid": "design-toolbar", children: [
        O && /* @__PURE__ */ e.jsx("div", { className: "absolute left-5 flex h-full items-center", children: d }),
        S && /* @__PURE__ */ e.jsx("div", { className: "absolute right-5 flex h-full items-center", children: X })
      ] }),
      /* @__PURE__ */ e.jsx("div", { className: "flex grow items-center justify-center text-sm text-grey-400", children: l })
    ] });
  }
  let r = [];
  return n || (r.push({
    key: "cancel-modal",
    label: z,
    onClick: p || (() => {
      _(i, () => {
        F.remove(), s == null || s();
      });
    }),
    disabled: g
  }), r.push({
    key: "ok-modal",
    label: E,
    color: G,
    onClick: K,
    disabled: g
  })), /* @__PURE__ */ e.jsx(
    Y,
    {
      afterClose: s,
      animate: !1,
      footer: !1,
      padding: !1,
      size: $,
      testId: M,
      title: "",
      hideXOnMobile: !0,
      children: /* @__PURE__ */ e.jsxs("div", { className: "flex h-full grow", children: [
        /* @__PURE__ */ e.jsx("div", { className: `hidden grow flex-col md:!visible md:!flex ${o === "grey" ? "bg-grey-50" : "bg-white"}`, children: l }),
        f && /* @__PURE__ */ e.jsxs("div", { className: "relative flex h-full w-full flex-col border-l border-grey-100 md:w-auto md:basis-[400px]", children: [
          c || /* @__PURE__ */ e.jsxs("div", { className: "flex max-h-[74px] items-center justify-between gap-3 px-7 py-5", children: [
            /* @__PURE__ */ e.jsx(Z, { level: D, children: C }),
            n || /* @__PURE__ */ e.jsx(v, { buttons: r })
          ] }),
          /* @__PURE__ */ e.jsx("div", { className: `${c ? "" : "absolute inset-x-0 bottom-0 top-[74px] grow"} ${I && "p-7 pt-0"} flex flex-col justify-between overflow-y-auto ${j && j}`, children: f })
        ] })
      ] })
    }
  );
};
export {
  le as P
};
//# sourceMappingURL=PreviewModal-1c377ea9.mjs.map
