import { j as jsxRuntimeExports } from "../../../../../../_virtual/jsx-runtime.js";
import { useState, useRef, useCallback, useEffect, createContext, useContext } from "react";
import { FiChevronLeft, FiChevronRight } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.1.1/node_modules/react-icons/fi/index.js";
import ObjectFields from "./field-factory.js";
import { Type } from "@sinclair/typebox";
import { tx as D } from "../../../../../style-system/dist/twind.js";
const FormNavigatorContext = createContext(null);
const useFormNavigation = () => {
  const context = useContext(FormNavigatorContext);
  if (!context) {
    throw new Error("useNavigation must be used within a FormNavigatorContext");
  }
  return context;
};
const NavList = ({ items }) => {
  const { navigateTo } = useFormNavigation();
  return /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "list-none p-0 m-0", children: items.map((item) => {
    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
      "li",
      {
        className: D(
          `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",
          item.children && "cursor-pointer hover:bg-upstart-50 dark:hover:bg-dark-600 font-medium"
        ),
        onClick: () => {
          if (item.children) {
            navigateTo(item);
          }
        },
        children: [
          item.schema ? /* @__PURE__ */ jsxRuntimeExports.jsx(SchemaField, { item }) : item.label,
          item.children && /* @__PURE__ */ jsxRuntimeExports.jsx(FiChevronRight, { className: "text-gray-400 dark:text-inherit" })
        ]
      },
      item.id
    );
  }) });
};
function SchemaField({ item }) {
  const { onChange, formData, formSchema, brickId } = useFormNavigation();
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
    ObjectFields,
    {
      schema: Type.Object({ [item.id]: item.schema }, item.schema),
      formData,
      formSchema,
      onChange,
      options: {
        brickId,
        parents: item.path.split(".").slice(0, -1)
      }
    }
  );
}
const FormNavigator = ({
  title,
  navItems,
  className,
  onNavigate,
  // style,
  onChange,
  formData,
  formSchema,
  initialGroup,
  brickId
}) => {
  const [viewStack, setViewStack] = useState([
    {
      content: /* @__PURE__ */ jsxRuntimeExports.jsx(NavList, { items: navItems }),
      title
    }
  ]);
  const ref = useRef(null);
  const refNavigated = useRef(false);
  const hasChildrenItems = navItems.some((item) => item.children && item.children.length > 0);
  const [animationDirection, setAnimationDirection] = useState(null);
  const navigateTo = useCallback((item, direction = "forward") => {
    onNavigate?.(item);
    setAnimationDirection(direction);
    const content = item.children ? /* @__PURE__ */ jsxRuntimeExports.jsx(NavList, { items: item.children }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
      "content: ",
      item.label
    ] });
    const title2 = item.label ?? "Untitled";
    setViewStack((prev) => [...prev, { content, title: title2 }]);
    setTimeout(() => {
      setAnimationDirection(null);
    }, 300);
  }, []);
  const navigateBack = useCallback(() => {
    if (viewStack.length <= 1) return;
    setAnimationDirection("backward");
    setViewStack((prev) => prev.slice(0, -1));
    onNavigate?.(null);
    setTimeout(() => {
      setAnimationDirection(null);
    }, 300);
  }, [viewStack.length]);
  const currentView = viewStack[viewStack.length - 1];
  const getAnimationClass = () => {
    if (!animationDirection) return "";
    return animationDirection === "forward" ? "animate-slide-in" : "animate-slide-back";
  };
  useEffect(() => {
    if (initialGroup && !refNavigated.current) {
      refNavigated.current = true;
      const item = navItems.find((item2) => item2.id === initialGroup);
      if (item) {
        navigateTo(item, null);
      }
    }
  }, []);
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
    FormNavigatorContext.Provider,
    {
      value: {
        navigateTo,
        navigateBack,
        onChange,
        formData,
        brickId,
        formSchema,
        isRootView: viewStack.length === 1
      },
      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
        "div",
        {
          ref,
          className: D("navigator-view transition-all relative overflow-x-hidden scrollbar-thin", className),
          style: {
            width: "100%"
            // ...style,
          },
          children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: D("absolute inset-0 flex flex-col ", getAnimationClass()), children: [
            hasChildrenItems && /* @__PURE__ */ jsxRuntimeExports.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: [
              viewStack.length > 1 ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
                "button",
                {
                  type: "button",
                  className: D(
                    `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: navigateBack,
                  children: [
                    /* @__PURE__ */ jsxRuntimeExports.jsx(FiChevronLeft, {}),
                    "Back"
                  ]
                }
              ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-10" }),
              /* @__PURE__ */ jsxRuntimeExports.jsx(
                "h3",
                {
                  className: D(
                    "flex-1 m-0 text-sm font-semibold text-center select-none first-letter:uppercase"
                  ),
                  children: currentView.title
                }
              ),
              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-10" })
            ] }),
            currentView.content
          ] })
        }
      )
    }
  );
};
export {
  FormNavigator as default
};
//# sourceMappingURL=FormNavigator.js.map
