import { j as o, x as p, T as j, B as N, J as y, N as S, u as C, a as R, ah as T, p as L, b as O, M, E as U } from "./index-c65ca4a4.mjs";
import { U as k } from "./URLTextField-a472a6c7.mjs";
import { S as z, u as D } from "./useSortableIndexedList-064b5b13.mjs";
const b = ({ baseUrl: i, item: a, updateItem: r, clearError: t, labelPlaceholder: v, unstyled: m, textFieldClasses: c, action: I, className: g, ...d }) => /* @__PURE__ */ o.jsxs("div", { className: p("flex w-full items-start gap-3", g), "data-testid": "navigation-item-editor", ...d, children: [
  /* @__PURE__ */ o.jsx("div", { className: "flex flex-1 pt-1", children: /* @__PURE__ */ o.jsx(
    j,
    {
      className: c,
      containerClassName: "grow",
      error: !!a.errors.label,
      hint: a.errors.label,
      placeholder: v,
      title: "Label",
      unstyled: m,
      value: a.label,
      hideTitle: !0,
      onChange: (l) => r == null ? void 0 : r({ label: l.target.value }),
      onKeyDown: () => t == null ? void 0 : t("label")
    }
  ) }),
  /* @__PURE__ */ o.jsx("div", { className: "flex flex-1 pt-1", children: /* @__PURE__ */ o.jsx(
    k,
    {
      baseUrl: i,
      className: c,
      containerClassName: "grow",
      error: !!a.errors.url,
      hint: a.errors.url,
      title: "URL",
      unstyled: m,
      value: a.url,
      hideTitle: !0,
      onChange: (l) => r == null ? void 0 : r({ url: l }),
      onKeyDown: () => t == null ? void 0 : t("url")
    }
  ) }),
  I
] }), f = ({ baseUrl: i, navigation: a }) => /* @__PURE__ */ o.jsxs("div", { className: "w-full pt-2", children: [
  /* @__PURE__ */ o.jsx(
    z,
    {
      items: a.items,
      itemSeparator: !1,
      renderItem: (r) => /* @__PURE__ */ o.jsx(
        b,
        {
          action: /* @__PURE__ */ o.jsx(N, { className: "self-center", icon: "trash", size: "sm", onClick: () => a.removeItem(r.id) }),
          baseUrl: i,
          clearError: (t) => a.clearError(r.id, t),
          item: r,
          updateItem: (t) => a.updateItem(r.id, t)
        }
      ),
      onMove: a.moveItem
    }
  ),
  /* @__PURE__ */ o.jsx(
    b,
    {
      action: /* @__PURE__ */ o.jsx(N, { className: "self-center", color: "green", "data-testid": "add-button", icon: "add", iconColorClass: "text-white", size: "sm", onClick: a.addItem }),
      baseUrl: i,
      className: "mt-1 pl-7",
      clearError: (r) => a.clearError(a.newItem.id, r),
      "data-testid": "new-navigation-item",
      item: a.newItem,
      labelPlaceholder: "New item label",
      updateItem: a.setNewItem
    }
  )
] }), x = ({ items: i, setItems: a }) => {
  const r = (e) => !!(e.label && !e.label.match(/^\s*$/) || e.url !== "/"), t = D({
    items: i.map((e) => ({ ...e, errors: {} })),
    setItems: (e) => a(e.map(({ url: s, label: n }) => ({ url: s, label: n }))),
    blank: { label: "", url: "/", errors: {} },
    canAddNewItem: r
  }), v = new RegExp(/^(\/|#|[a-zA-Z0-9-]+:)/), m = (e) => {
    const s = {};
    return (!e.label || e.label.match(/^\s*$/)) && (s.label = "You must specify a label"), (!e.url || e.url.match(/\s/) || !y.isURL(e.url, { require_protocol: !0 }) && !e.url.match(v)) && (s.url = "You must specify a valid URL or relative path"), s;
  }, c = (e, s) => {
    const n = t.items.find((u) => u.id === e);
    t.updateItem(e, { ...n.item, ...s });
  }, I = () => {
    const e = m(t.newItem);
    Object.values(e).some((s) => s) ? t.setNewItem({ ...t.newItem, errors: e }) : t.addItem();
  }, g = (e) => {
    t.removeItem(e);
  }, d = (e, s) => {
    t.moveItem(e, s);
  }, l = "new", w = (e, s) => {
    if (e === l)
      t.setNewItem({ ...t.newItem, errors: { ...t.newItem.errors, [s]: void 0 } });
    else {
      const n = t.items.find((u) => u.id === e).item;
      t.updateItem(e, { ...n, errors: { ...n.errors, [s]: void 0 } });
    }
  };
  return {
    items: t.items.map(({ item: e, id: s }) => ({ ...e, id: s })),
    updateItem: c,
    addItem: I,
    removeItem: g,
    moveItem: d,
    newItem: { ...t.newItem, id: l },
    setNewItem: (e) => t.setNewItem({ ...t.newItem, ...e }),
    clearError: w,
    validate: () => {
      let e = !0;
      if (t.items.forEach(({ item: s, id: n }) => {
        let u = m(s);
        Object.values(u).some((h) => h) && (e = !1, t.updateItem(n, { ...s, errors: u }));
      }), r(t.newItem)) {
        const s = m(t.newItem);
        Object.values(s).some((n) => n) && (e = !1, t.setNewItem({ ...t.newItem, errors: s }));
      }
      return e;
    }
  };
}, F = S.create(() => {
  const i = C(), { updateRoute: a } = R(), {
    localSettings: r,
    updateSetting: t,
    saveState: v,
    handleSave: m,
    siteData: c
  } = T(), [I, g] = L(
    r,
    ["navigation", "secondary_navigation"]
  ).map((s) => JSON.parse(s || "[]")), d = x({
    items: I,
    setItems: (s) => {
      t("navigation", JSON.stringify(s));
    }
  }), l = x({
    items: g,
    setItems: (s) => t("secondary_navigation", JSON.stringify(s))
  }), [w, e] = O("primary-nav");
  return /* @__PURE__ */ o.jsx(
    M,
    {
      afterClose: () => {
        a("navigation");
      },
      buttonsDisabled: v === "saving",
      dirty: r.some((s) => s.dirty),
      scrolling: !0,
      size: "lg",
      stickyFooter: !0,
      testId: "navigation-modal",
      title: "Navigation",
      onOk: async () => {
        d.validate() && l.validate() && (await m(), i.remove(), a("navigation"));
      },
      children: /* @__PURE__ */ o.jsx("div", { className: "-mb-8 mt-6", children: /* @__PURE__ */ o.jsx(
        U,
        {
          selectedTab: w,
          tabs: [
            {
              id: "primary-nav",
              title: "Primary navigation",
              contents: /* @__PURE__ */ o.jsx(f, { baseUrl: c.url, navigation: d })
            },
            {
              id: "secondary-nav",
              title: "Secondary navigation",
              contents: /* @__PURE__ */ o.jsx(f, { baseUrl: c.url, navigation: l })
            }
          ],
          onTabChange: e
        }
      ) })
    }
  );
});
export {
  F as default
};
//# sourceMappingURL=NavigationModal-f93ef0c4.mjs.map
