import { V as M, b as P, Y as F, j as e, Z as E, T as H, z as y, $ as A, W as S, X as j, e as O, a0 as f, K as J, i as Y, a1 as Z, G as ee, N as te, u as se, o as ae, q as oe, a2 as ne, a as z, h as ie, p as ce, a3 as B, E as re, a4 as le, a5 as de } from "./index-c65ca4a4.mjs";
import { C as $ } from "./ColorPickerField-d6436bfd.mjs";
import { d as I } from "./debounce-972af544.mjs";
import { P as me } from "./PreviewModal-1c377ea9.mjs";
import { d as he } from "./themes-675c54fc.mjs";
import "./ColorIndicator-6c9a0d02.mjs";
import "./eyedropper-3f5af505.mjs";
import "./MobileChrome-2e9f6901.mjs";
const pe = ({ values: t, updateSetting: s }) => {
  const { mutateAsync: i } = M(), [l, a] = P(t.description), d = F(
    I((n) => {
      s("description", n);
    }, 500)
  ), c = I(s, 500);
  return /* @__PURE__ */ e.jsx("div", { className: "mt-7", children: /* @__PURE__ */ e.jsxs(E, { children: [
    /* @__PURE__ */ e.jsx(
      H,
      {
        clearBg: !0,
        hint: "Used in your theme, meta data and search results",
        title: "Site description",
        value: l,
        onChange: (n) => {
          a(n.target.value), d.current(n.target.value);
        }
      },
      "site-description"
    ),
    /* @__PURE__ */ e.jsx(
      $,
      {
        direction: "rtl",
        title: /* @__PURE__ */ e.jsx(y, { className: "mt-[3px]", grey: !0, level: 6, children: "Accent color" }),
        value: t.accentColor,
        onChange: (n) => c("accent_color", n)
      }
    ),
    /* @__PURE__ */ e.jsxs("div", { className: `flex justify-between ${t.icon ? "items-start " : "items-end"}`, children: [
      /* @__PURE__ */ e.jsxs("div", { children: [
        /* @__PURE__ */ e.jsx(y, { grey: !!t.icon, level: 6, children: "Publication icon" }),
        /* @__PURE__ */ e.jsx(A, { className: "mr-5 max-w-[160px]", children: "A square, social icon, at least 60x60px" })
      ] }),
      /* @__PURE__ */ e.jsx("div", { className: "flex gap-3", children: /* @__PURE__ */ e.jsx(
        S,
        {
          deleteButtonClassName: "!top-1 !right-1",
          height: t.icon ? "66px" : "36px",
          id: "logo",
          imageBWCheckedBg: !0,
          imageURL: t.icon || "",
          width: t.icon ? "66px" : "150px",
          onDelete: () => s("icon", null),
          onUpload: async (n) => {
            s("icon", j(await i({ file: n })));
          },
          children: "Upload icon"
        }
      ) })
    ] }),
    /* @__PURE__ */ e.jsxs("div", { children: [
      /* @__PURE__ */ e.jsx(y, { className: "mb-2", grey: !!t.logo, level: 6, children: "Publication logo" }),
      /* @__PURE__ */ e.jsx(
        S,
        {
          deleteButtonClassName: "!top-1 !right-1",
          height: "80px",
          id: "site-logo",
          imageBWCheckedBg: !0,
          imageFit: "contain",
          imageURL: t.logo || "",
          onDelete: () => s("logo", null),
          onUpload: async (n) => {
            s("logo", j(await i({ file: n })));
          },
          children: "Upload logo"
        }
      )
    ] }),
    /* @__PURE__ */ e.jsxs("div", { children: [
      /* @__PURE__ */ e.jsx(y, { className: "mb-2", grey: !!t.coverImage, level: 6, children: "Publication cover" }),
      /* @__PURE__ */ e.jsx(
        S,
        {
          deleteButtonClassName: "!top-1 !right-1",
          height: "180px",
          id: "cover",
          imageURL: t.coverImage || "",
          onDelete: () => s("cover_image", null),
          onUpload: async (n) => {
            s("cover_image", j(await i({ file: n })));
          },
          children: "Upload cover"
        }
      )
    ] })
  ] }) });
};
function ue({
  description: t,
  accentColor: s,
  icon: i,
  logo: l,
  coverImage: a,
  themeSettings: d
}) {
  const c = new URLSearchParams();
  c.append("c", s), c.append("d", t), c.append("icon", i), c.append("logo", l), c.append("cover", a);
  const n = {};
  return d.forEach((u) => {
    n[u.key] = u.value;
  }), c.append("custom", JSON.stringify(n)), c.toString();
}
const ge = ({ settings: t, url: s }) => {
  const i = F(null);
  return O(() => {
    s && fetch(s, {
      method: "POST",
      headers: {
        "Content-Type": "text/html;charset=utf-8",
        "x-ghost-preview": ue({
          ...t
        }),
        Accept: "text/plain",
        mode: "cors",
        credentials: "include"
      }
    }).then((l) => l.text()).then((l) => {
      var v, g, p;
      const a = "html { pointer-events: none; }", c = new DOMParser().parseFromString(l, "text/html"), n = c.querySelector("style"), u = n.innerHTML;
      n.innerHTML = `${u}

${a}`;
      let m = (c.doctype ? new XMLSerializer().serializeToString(c.doctype) : "") + c.documentElement.outerHTML;
      const h = i.current;
      h && ((v = h.contentDocument) == null || v.open(), (g = h.contentDocument) == null || g.write(m), (p = h.contentDocument) == null || p.close());
    }).catch(() => {
    });
  }, [s, t]), /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsx(
    "iframe",
    {
      ref: i,
      "data-testid": "theme-preview",
      height: "100%",
      title: "Site Preview",
      width: "100%"
    }
  ) });
}, xe = ({ setting: t, setSetting: s }) => {
  const { mutateAsync: i } = M(), l = async (a) => {
    const d = j(await i({ file: a }));
    s(d);
  };
  switch (t.type) {
    case "text":
      return /* @__PURE__ */ e.jsx(
        H,
        {
          hint: t.description,
          title: f(t.key),
          value: t.value || "",
          onChange: (a) => s(a.target.value)
        }
      );
    case "boolean":
      return /* @__PURE__ */ e.jsx(
        Y,
        {
          direction: "rtl",
          hint: t.description,
          label: f(t.key),
          onChange: (a) => s(a.target.checked)
        }
      );
    case "select":
      return /* @__PURE__ */ e.jsx(
        J,
        {
          hint: t.description,
          options: t.options.map((a) => ({ label: a, value: a })),
          selectedOption: t.value,
          title: f(t.key),
          onSelect: (a) => s(a)
        }
      );
    case "color":
      return /* @__PURE__ */ e.jsx(
        $,
        {
          direction: "rtl",
          hint: t.description,
          title: f(t.key),
          value: t.value || "",
          onChange: (a) => s(a)
        }
      );
    case "image":
      return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
        /* @__PURE__ */ e.jsx(y, { useLabelTag: !0, children: f(t.key) }),
        /* @__PURE__ */ e.jsx(
          S,
          {
            height: t.value ? "100px" : "32px",
            id: "cover-image",
            imageURL: t.value || "",
            onDelete: () => s(null),
            onUpload: (a) => l(a),
            children: "Upload image"
          }
        ),
        t.description && /* @__PURE__ */ e.jsx(A, { children: t.description })
      ] });
  }
}, ve = ({ settings: t, updateSetting: s }) => /* @__PURE__ */ e.jsx(E, { className: "mt-7", children: t.map((i) => /* @__PURE__ */ e.jsx(xe, { setSetting: (l) => s({ ...i, value: l }), setting: i }, i.key)) }), G = "CustomThemeSettingsResponseType", fe = Z({
  dataType: G,
  path: "/custom_theme_settings/"
}), ye = ee({
  method: "PUT",
  path: () => "/custom_theme_settings/",
  body: (t) => ({ custom_theme_settings: t }),
  updateQueries: {
    dataType: G,
    update: (t) => t
  }
}), be = ({
  brandSettings: t,
  themeSettingSections: s,
  modal: i,
  updateBrandSetting: l,
  updateThemeSetting: a,
  onTabChange: d,
  handleSave: c
}) => {
  const { updateRoute: n } = z(), [u, b] = P("brand"), { data: { themes: m } = {} } = he(), h = m == null ? void 0 : m.find((p) => p.active), v = [
    {
      id: "brand",
      title: "Brand",
      contents: /* @__PURE__ */ e.jsx(pe, { updateSetting: l, values: t })
    },
    ...s.map(({ id: p, title: w, settings: T }) => ({
      id: p,
      title: w,
      contents: /* @__PURE__ */ e.jsx(ve, { settings: T, updateSetting: a })
    }))
  ], g = (p) => {
    b(p), d(p);
  };
  return /* @__PURE__ */ e.jsxs("div", { className: "flex h-full flex-col justify-between", children: [
    /* @__PURE__ */ e.jsx("div", { className: "p-7", "data-testid": "design-setting-tabs", children: /* @__PURE__ */ e.jsx(re, { selectedTab: u, tabs: v, onTabChange: g }) }),
    /* @__PURE__ */ e.jsx(le, { height: 74, children: /* @__PURE__ */ e.jsx("div", { className: "w-full px-7", children: /* @__PURE__ */ e.jsxs("button", { className: "group flex w-full items-center justify-between text-sm font-medium opacity-80 transition-all hover:opacity-100", "data-testid": "change-theme", type: "button", onClick: async () => {
      await c(), i.remove(), n("design/edit/themes");
    }, children: [
      /* @__PURE__ */ e.jsxs("div", { className: "text-left", children: [
        /* @__PURE__ */ e.jsx("div", { className: "font-semibold", children: "Change theme" }),
        /* @__PURE__ */ e.jsxs("div", { className: "font-sm text-grey-700", children: [
          "Current theme: ",
          h == null ? void 0 : h.name
        ] })
      ] }),
      /* @__PURE__ */ e.jsx(de, { className: "mr-2 transition-all group-hover:translate-x-2", name: "chevron-right", size: "sm" })
    ] }) }) })
  ] });
}, Se = () => {
  const t = se(), { settings: s, siteData: i } = ae(), { mutateAsync: l } = oe(), { data: { posts: [a] } = { posts: [] } } = ne({
    searchParams: {
      filter: "status:published",
      order: "published_at DESC",
      limit: "1",
      fields: "id,url"
    }
  }), { data: d } = fe(), { mutateAsync: c } = ye(), [n, u] = P("homepage"), { updateRoute: b } = z(), {
    formState: m,
    saveState: h,
    handleSave: v,
    updateForm: g,
    setFormState: p
  } = ie({
    initialState: {
      settings: s,
      themeSettings: (d == null ? void 0 : d.custom_theme_settings) || []
    },
    onSave: async () => {
      if (m.themeSettings.some((o) => o.dirty)) {
        const o = await c(m.themeSettings);
        g((r) => ({ ...r, themeSettings: o.custom_theme_settings }));
      }
      if (m.settings.some((o) => o.dirty)) {
        const { settings: o } = await l(m.settings.filter((r) => r.dirty));
        g((r) => ({ ...r, settings: o }));
      }
    }
  });
  O(() => {
    d && p((o) => ({ ...o, themeSettings: d.custom_theme_settings }));
  }, [p, d]);
  const w = (o, r) => {
    g((x) => ({ ...x, settings: x.settings.map((D) => D.key === o ? { ...D, value: r, dirty: !0 } : D) }));
  }, T = (o) => {
    g((r) => ({ ...r, themeSettings: r.themeSettings.map((x) => x.key === o.key ? { ...o, dirty: !0 } : x) }));
  }, [N, k, _, R, L] = ce(m.settings, ["description", "accent_color", "icon", "logo", "cover_image"]), q = m.themeSettings.reduce((o, r) => {
    const x = r.group === "homepage" || r.group === "post" ? r.group : "site-wide";
    return {
      ...o,
      [x]: (o[x] || []).concat(r)
    };
  }, {}), V = Object.entries(q).map(([o, r]) => ({
    id: o,
    settings: r || [],
    title: o === "site-wide" ? "Site wide" : o === "homepage" ? "Homepage" : "Post"
  }));
  let C = [];
  a && (C = [
    { id: "homepage", title: "Homepage" },
    { id: "post", title: "Post" }
  ]);
  const W = (o) => {
    C.length && u(o);
  }, K = (o) => {
    u(o === "post" && a ? "post" : "homepage");
  };
  let U = B(i);
  switch (n) {
    case "homepage":
      U = B(i);
      break;
    case "post":
      U = a.url;
      break;
  }
  const Q = /* @__PURE__ */ e.jsx(
    ge,
    {
      settings: {
        description: N,
        accentColor: k,
        icon: _,
        logo: R,
        coverImage: L,
        themeSettings: m.themeSettings
      },
      url: U
    }
  ), X = /* @__PURE__ */ e.jsx(
    be,
    {
      brandSettings: { description: N, accentColor: k, icon: _, logo: R, coverImage: L },
      handleSave: v,
      modal: t,
      themeSettingSections: V,
      updateBrandSetting: w,
      updateThemeSetting: T,
      onTabChange: K
    }
  );
  return /* @__PURE__ */ e.jsx(
    me,
    {
      afterClose: () => {
        b("design");
      },
      buttonsDisabled: h === "saving",
      cancelLabel: "Close",
      defaultTab: "homepage",
      dirty: h === "unsaved",
      okLabel: h === "saved" ? "Saved" : h === "saving" ? "Saving..." : "Save",
      preview: Q,
      previewToolbarTabs: C,
      selectedURL: n,
      sidebar: X,
      sidebarPadding: !1,
      size: "full",
      testId: "design-modal",
      title: "Design",
      onOk: async () => {
        await v();
      },
      onSelectURL: W
    }
  );
}, ke = te.create(Se);
export {
  ke as default
};
//# sourceMappingURL=DesignModal-1f703bda.mjs.map
