import { j as e } from "../../../../../../_virtual/jsx-runtime.js";
import { useState as g, useRef as v, useCallback as j, useEffect as A, createContext as B, useContext as L } from "react";
import { FiChevronLeft as O, FiChevronRight as z } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/fi/index.js";
import P from "./field-factory.js";
import { Type as U } from "@sinclair/typebox";
import { tx as a } from "../../../../../style-system/dist/twind.js";
const w = B(null), N = () => {
  const n = L(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((r) => /* @__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",
        r.children && "cursor-pointer hover:bg-upstart-50 dark:hover:bg-dark-600 font-medium"
      ),
      onClick: () => {
        r.children && s(r);
      },
      children: [
        r.schema ? /* @__PURE__ */ e.jsx(q, { item: r }) : r.label,
        r.children && /* @__PURE__ */ e.jsx(z, { className: "text-gray-400 dark:text-inherit" })
      ]
    },
    r.id
  )) });
};
function q({ item: n }) {
  const { onChange: s, formData: r, formSchema: i, brickId: c } = N();
  return /* @__PURE__ */ e.jsx(
    P,
    {
      schema: U.Object({ [n.id]: n.schema }, n.schema),
      formData: r,
      formSchema: i,
      onChange: s,
      options: {
        brickId: c,
        parents: n.path.split(".").slice(0, -1)
      }
    }
  );
}
const W = ({
  title: n,
  navItems: s,
  className: r,
  onNavigate: i,
  // style,
  onChange: c,
  formData: C,
  formSchema: y,
  initialGroup: u,
  brickId: F
}) => {
  const [o, h] = g([
    {
      content: /* @__PURE__ */ e.jsx(k, { items: s }),
      title: n
    }
  ]), S = v(null), m = v(!1), T = s.some((t) => t.children && t.children.length > 0), [x, l] = g(null), f = j((t, d = "forward") => {
    i?.(t), l(d);
    const R = t.children ? /* @__PURE__ */ e.jsx(k, { items: t.children }) : /* @__PURE__ */ e.jsxs("div", { children: [
      "content: ",
      t.label
    ] }), E = t.label ?? "Untitled";
    h((V) => [...V, { content: R, title: E }]), setTimeout(() => {
      l(null);
    }, 300);
  }, []), b = j(() => {
    o.length <= 1 || (l("backward"), h((t) => t.slice(0, -1)), i?.(null), setTimeout(() => {
      l(null);
    }, 300));
  }, [o.length]), p = o[o.length - 1], D = () => x ? x === "forward" ? "animate-slide-in" : "animate-slide-back" : "";
  return A(() => {
    if (u && !m.current) {
      m.current = !0;
      const t = s.find((d) => d.id === u);
      t && f(t, null);
    }
  }, []), /* @__PURE__ */ e.jsx(
    w.Provider,
    {
      value: {
        navigateTo: f,
        navigateBack: b,
        onChange: c,
        formData: C,
        brickId: F,
        formSchema: y,
        isRootView: o.length === 1
      },
      children: /* @__PURE__ */ e.jsx(
        "div",
        {
          ref: S,
          className: a("navigator-view transition-all relative overflow-x-hidden scrollbar-thin", r),
          style: {
            width: "100%"
            // ...style,
          },
          children: /* @__PURE__ */ e.jsxs("div", { className: a("absolute inset-0 flex flex-col ", D()), children: [
            T && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center p-2 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-semibold text-sm hover:opacity-90 focus:outline-none select-none`
                  ),
                  onClick: b,
                  children: [
                    /* @__PURE__ */ e.jsx(O, {}),
                    "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 {
  W as default
};
//# sourceMappingURL=FormNavigator.js.map
