import { b as x, Y as L, e as N, j as o, z as R, b5 as T, B as M, N as P, a as D, o as U, ah as A, p as G, b6 as H, M as V } from "./index-c65ca4a4.mjs";
import { C as W } from "./ColorIndicator-6c9a0d02.mjs";
import { F as _ } from "./Form-f4ced0f0.mjs";
import { R as q } from "./Radio-155d4c50.mjs";
import { T as J } from "./TextArea-65b41e1e.mjs";
import { t as $ } from "./color-utils-fa93758b.mjs";
const K = ({ html: a, style: r }) => {
  const [t, f] = x(0), s = [L(null), L(null)], d = (p) => {
    var n;
    const l = s[p].current;
    if (!l)
      return;
    const m = l.contentDocument || ((n = l.contentWindow) == null ? void 0 : n.document);
    if (!m)
      return;
    const i = `
            <html>
                <head>
                    <style>body, html {padding: 0; margin: 0; overflow: hidden;}</style>
                    <style>${r}</style>
                </head>
                <body>${a}</body>
            </html>
        `;
    m.open(), m.write(i), m.close();
  };
  return N(() => {
    const p = t === 0 ? 1 : 0;
    d(p);
    const l = setTimeout(() => {
      f(p);
    }, 100);
    return () => {
      clearTimeout(l);
    };
  }, [a, r]), /* @__PURE__ */ o.jsxs("div", { className: "relative", children: [
    /* @__PURE__ */ o.jsx(
      "iframe",
      {
        ref: s[0],
        className: `absolute h-full w-full transition-opacity duration-500 ${t !== 0 ? "z-10 opacity-0" : "z-20 opacity-100"}`,
        frameBorder: "0",
        title: "Signup Form Preview 1"
      }
    ),
    /* @__PURE__ */ o.jsx(
      "iframe",
      {
        ref: s[1],
        className: `absolute h-full w-full transition-opacity duration-500 ${t !== 1 ? "z-10 opacity-0" : "z-20 opacity-100"}`,
        frameBorder: "0",
        title: "Signup Form Preview 2"
      }
    )
  ] });
}, Y = ({
  selectedLayout: a,
  accentColor: r,
  handleColorToggle: t,
  selectedColor: f,
  labels: s,
  selectedLabels: d,
  handleLabelClick: p,
  embedScript: l,
  handleLayoutSelect: m,
  handleCopyClick: i,
  isCopied: n
}) => {
  const g = s ? s.map((e) => ({
    label: e == null ? void 0 : e.name,
    value: e == null ? void 0 : e.name
  })).filter(Boolean) : [];
  return /* @__PURE__ */ o.jsxs("div", { className: "flex h-full flex-col justify-between", children: [
    /* @__PURE__ */ o.jsxs("div", { children: [
      /* @__PURE__ */ o.jsx(R, { className: "mb-4", level: 4, children: "Embed signup form" }),
      /* @__PURE__ */ o.jsxs(_, { children: [
        /* @__PURE__ */ o.jsx(
          q,
          {
            id: "embed-layout",
            options: [
              {
                label: "Branded",
                value: "all-in-one"
              },
              {
                label: "Minimal",
                value: "minimal"
              }
            ],
            selectedOption: a,
            title: "Layout",
            onSelect: (e) => {
              m(e);
            }
          }
        ),
        a === "all-in-one" && /* @__PURE__ */ o.jsx(
          W,
          {
            isExpanded: !1,
            swatches: [
              {
                hex: "#08090c",
                title: "Dark"
              },
              {
                hex: "#ffffff",
                title: "Light"
              },
              {
                hex: r || "#d74780",
                title: "Accent"
              }
            ],
            swatchSize: "lg",
            title: "Background color",
            value: f,
            onSwatchChange: (e) => {
              e && t(e);
            },
            onTogglePicker: () => {
            }
          }
        ),
        /* @__PURE__ */ o.jsx(
          T,
          {
            hint: "Will be applied to all members signing up via this form",
            options: g,
            placeholder: "Pick one or more labels (optional)",
            title: "Labels at signup",
            values: d || [],
            onChange: p
          }
        ),
        /* @__PURE__ */ o.jsx(
          J,
          {
            className: "text-grey-800",
            clearBg: !1,
            fontStyle: "mono",
            hint: "Paste this code onto any website where you'd like your signup to appear.",
            title: "Embed code",
            value: `${l}`,
            onChange: () => {
            }
          }
        )
      ] })
    ] }),
    /* @__PURE__ */ o.jsx(M, { className: "self-end", color: n ? "green" : "black", label: n ? "Copied!" : "Copy code", onClick: i })
  ] });
};
function I(a) {
  return a ? a.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;") : "";
}
const Q = ({
  preview: a,
  config: r,
  settings: t,
  labels: f,
  backgroundColor: s,
  layout: d,
  i18nEnabled: p
}) => {
  const l = r.blogUrl, m = r.signupForm.url.replace("{version}", r.signupForm.version);
  let i = {
    site: l,
    "button-color": t.accentColor,
    "button-text-color": $(t.accentColor).hex()
  };
  p && t.locale && (i.locale = t.locale);
  for (const [u, b] of f.entries())
    i[`label-${u + 1}`] = b.name;
  let n = "min-height: 58px;max-width: 440px;margin: 0 auto;width: 100%";
  d === "all-in-one" && (t.icon && t.icon !== "" && (i.icon = t.icon.replace(/\/content\/images\//, "/content/images/size/w192h192/")), i.title = t.title, i.description = t.description, i["background-color"] = s, i["text-color"] = $(s).hex(), n = "height: 40vmin;min-height: 360px"), a && (d === "minimal" ? n = "min-height: 58px; max-width: 440px;width: 100%;position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%);" : n = "height: 100vh");
  let g = "";
  const e = [
    "background-color",
    "text-color",
    "button-color",
    "button-text-color",
    "title",
    "description",
    "icon",
    "site",
    "locale"
  ], C = Object.keys(i).sort((u, b) => e.indexOf(u) - e.indexOf(b));
  for (const u of C) {
    const b = i[u];
    g += ` data-${u}="${I(b)}"`;
  }
  const h = `<div style="${I(n)}"><script src="${encodeURI(m)}"${g} async><\/script></div>`;
  return a && n === "minimal" ? `<div style="position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);background-size: 16px 16px;background-position: 0 0, 8px 8px;;"></div>${h}` : h;
}, ie = P.create(() => {
  let a = !1;
  const [r, t] = x("#08090c"), [f, s] = x([]), [d, p] = x("all-in-one"), [l, m] = x(""), [i, n] = x(!1), { updateRoute: g } = D(), { config: e } = U(), { localSettings: C, siteData: h } = A(), [u, b, w, j, k, F] = G(C, ["accent_color", "title", "description", "locale", "labs", "icon"]), { data: S } = H();
  k && (a = JSON.parse(k).i18n), N(() => {
    var v, y;
    if (!h)
      return;
    const c = Q({
      preview: !0,
      config: {
        blogUrl: h.url,
        signupForm: {
          url: (v = e == null ? void 0 : e.signupForm) == null ? void 0 : v.url,
          version: (y = e == null ? void 0 : e.signupForm) == null ? void 0 : y.version
        }
      },
      settings: {
        accentColor: u || "#d74780",
        title: b || "",
        locale: j || "en",
        icon: F || "",
        description: w || ""
      },
      labels: f.map(({ label: O }) => ({ name: O })),
      backgroundColor: r || "#08090c",
      layout: d,
      i18nEnabled: a
    });
    m(c);
  }, [h, u, f, e, b, r, d, j, a, F, w]);
  const z = async () => {
    try {
      await navigator.clipboard.writeText(l), n(!0), setTimeout(() => n(!1), 2e3);
    } catch (c) {
      console.error("Failed to copy text: ", c);
    }
  }, B = (c) => {
    t(c);
  }, E = (c) => {
    if (c != null && c.length) {
      const v = c == null ? void 0 : c.map(({ value: y }) => ({ label: y, value: y }));
      s(v);
    } else
      s([]);
  };
  return /* @__PURE__ */ o.jsx(
    V,
    {
      afterClose: () => {
        g("embed-signup-form");
      },
      cancelLabel: "",
      footer: !1,
      size: 1120,
      testId: "embed-signup-form",
      title: "",
      topRightContent: "close",
      children: /* @__PURE__ */ o.jsxs("div", { className: "grid grid-cols-[5.5fr_2.5fr] gap-6 pb-8", children: [
        /* @__PURE__ */ o.jsx(
          K,
          {
            html: l,
            style: d
          }
        ),
        /* @__PURE__ */ o.jsx(
          Y,
          {
            accentColor: u,
            embedScript: l,
            handleColorToggle: B,
            handleCopyClick: z,
            handleLabelClick: E,
            handleLayoutSelect: p,
            isCopied: i,
            labels: (S == null ? void 0 : S.labels) || [],
            selectedColor: r,
            selectedLabels: f,
            selectedLayout: d
          }
        )
      ] })
    }
  );
});
export {
  ie as default
};
//# sourceMappingURL=EmbedSignupFormModal-6d700500.mjs.map
