import { j as e } from "../../../../../../_virtual/jsx-runtime.js";
import { useState as g, useRef as v, useCallback as j, useEffect as V, createContext as A, useContext as B } from "react";
import { FiChevronLeft as L, FiChevronRight as O } from "../../../../../../node_modules/.pnpm/react-icons@5.3.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/fi/index.js";
import z from "./field-factory.js";
import { Type as P } from "@sinclair/typebox";
import { tx as a } from "../../../../../style-system/dist/twind.js";
const w = A(null), N = () => {
  const n = B(w);
  if (!n)
    throw new Error("useNavigation must be used within a FormNavigatorContext");
  return n;
}, k = ({ items: n }) => {
  const { navigateTo: s } = N();
  return /* @__PURE__ */ e.jsx("ul", { className: "list-none p-0 m-0", children: n.map((t) => /* @__PURE__ */ e.jsxs(
    "li",
    {
      className: a(
        `select-none px-2.5 py-3 flex items-center text-[0.85rem]
              justify-between border-b last:border-b-0 border-gray-100
            dark:border-dark-800 transition-colors duration-200 flex-wrap`,
        // if empty, hide
        "[&:not(:has(*))]:hidden",
        t.children && "cursor-pointer hover:bg-upstart-50 dark:hover:bg-dark-600"
      ),
      onClick: () => {
        t.children && s(t);
      },
      children: [
        t.schema ? /* @__PURE__ */ e.jsx(U, { item: t }) : t.label,
        t.children && /* @__PURE__ */ e.jsx(O, { className: "text-gray-400 dark:text-inherit" })
      ]
    },
    t.id
  )) });
};
function U({ item: n }) {
  const { onChange: s, formData: t, formSchema: l, brickId: c } = N();
  return /* @__PURE__ */ e.jsx(
    z,
    {
      schema: P.Object({ [n.id]: n.schema }, n.schema),
      formData: t,
      formSchema: l,
      onChange: s,
      options: {
        brickId: c,
        parents: n.path.split(".").slice(0, -1)
      }
    }
  );
}
const M = ({
  title: n,
  navItems: s,
  className: t,
  // style,
  onChange: l,
  formData: c,
  formSchema: C,
  initialGroup: h,
  brickId: y
}) => {
  const [o, u] = g([
    {
      content: /* @__PURE__ */ e.jsx(k, { items: s }),
      title: n
    }
  ]), F = v(null), m = v(!1), S = s.some((r) => r.children && r.children.length > 0), [x, i] = g(null), f = j((r, d = "forward") => {
    i(d);
    const R = r.children ? /* @__PURE__ */ e.jsx(k, { items: r.children }) : /* @__PURE__ */ e.jsxs("div", { children: [
      "content: ",
      r.label
    ] }), D = r.label ?? "Untitled";
    u((E) => [...E, { content: R, title: D }]), setTimeout(() => {
      i(null);
    }, 300);
  }, []), b = j(() => {
    o.length <= 1 || (i("backward"), u((r) => r.slice(0, -1)), setTimeout(() => {
      i(null);
    }, 300));
  }, [o.length]), p = o[o.length - 1], T = () => x ? x === "forward" ? "animate-slide-in" : "animate-slide-back" : "";
  return V(() => {
    if (h && !m.current) {
      m.current = !0;
      const r = s.find((d) => d.id === h);
      r && f(r, null);
    }
  }, []), /* @__PURE__ */ e.jsx(
    w.Provider,
    {
      value: {
        navigateTo: f,
        navigateBack: b,
        onChange: l,
        formData: c,
        brickId: y,
        formSchema: C,
        isRootView: o.length === 1
      },
      children: /* @__PURE__ */ e.jsx(
        "div",
        {
          ref: F,
          className: a("navigator-view transition-all relative overflow-x-hidden scrollbar-thin", t),
          style: {
            width: "100%"
            // ...style,
          },
          children: /* @__PURE__ */ e.jsxs("div", { className: a("absolute inset-0 flex flex-col ", T()), children: [
            S && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center p-2.5 border-b border-gray-200 dark:border-dark-600 bg-gray-50 dark:bg-dark-800 sticky top-0 z-10", children: [
              o.length > 1 ? /* @__PURE__ */ e.jsxs(
                "button",
                {
                  type: "button",
                  className: a(
                    `flex items-center gap-1 p-0 bg-transparent text-upstart-600 dark:text-upstart-300
                  border-0 cursor-pointer font-medium text-sm hover:opacity-80 focus:outline-none select-none`
                  ),
                  onClick: b,
                  children: [
                    /* @__PURE__ */ e.jsx(L, {}),
                    "Back"
                  ]
                }
              ) : /* @__PURE__ */ e.jsx("div", { className: "w-10" }),
              /* @__PURE__ */ e.jsx(
                "h3",
                {
                  className: a(
                    "flex-1 m-0 text-sm font-semibold text-center select-none first-letter:uppercase"
                  ),
                  children: p.title
                }
              ),
              /* @__PURE__ */ e.jsx("div", { className: "w-10" })
            ] }),
            p.content
          ] })
        }
      )
    }
  );
};
export {
  M as default
};
//# sourceMappingURL=FormNavigator.js.map
