import {
  RouteFocusModal
} from "./chunk-GDWBOQI5.js";
import {
  categoriesQueryKeys,
  useProductCategories
} from "./chunk-656G74I2.js";
import {
  queryClient
} from "./chunk-RHKRREUU.js";
import {
  fetchQuery
} from "./chunk-DTGEFKK4.js";

// src/pages/categories/[id]/organize/organize-category-form/organize-category-form.tsx
import { useMutation } from "@tanstack/react-query";
import { Spinner } from "@medusajs/icons";
import { toast } from "@medusajs/ui";
import { useState as useState2 } from "react";

// src/components/common/sortable-tree/sortable-tree.tsx
import {
  DndContext,
  DragOverlay,
  KeyboardSensor,
  MeasuringStrategy,
  PointerSensor,
  closestCenter,
  defaultDropAnimation,
  useSensor,
  useSensors
} from "@dnd-kit/core";
import {
  SortableContext,
  arrayMove as arrayMove2,
  verticalListSortingStrategy
} from "@dnd-kit/sortable";
import { CSS as CSS2 } from "@dnd-kit/utilities";
import { useEffect, useMemo, useRef, useState } from "react";
import { createPortal } from "react-dom";

// src/components/common/sortable-tree/keyboard-coordinates.ts
import {
  KeyboardCode,
  closestCorners,
  getFirstCollision
} from "@dnd-kit/core";

// src/components/common/sortable-tree/utils.ts
import { arrayMove } from "@dnd-kit/sortable";
var iOS = /iPad|iPhone|iPod/.test(navigator.platform);
function getDragDepth(offset, indentationWidth) {
  return Math.round(offset / indentationWidth);
}
function getProjection(items, activeId, overId, dragOffset, indentationWidth) {
  const overItemIndex = items.findIndex(({ id }) => id === overId);
  const activeItemIndex = items.findIndex(({ id }) => id === activeId);
  const activeItem = items[activeItemIndex];
  const newItems = arrayMove(items, activeItemIndex, overItemIndex);
  const previousItem = newItems[overItemIndex - 1];
  const nextItem = newItems[overItemIndex + 1];
  const dragDepth = getDragDepth(dragOffset, indentationWidth);
  const projectedDepth = activeItem.depth + dragDepth;
  const maxDepth = getMaxDepth({
    previousItem
  });
  const minDepth = getMinDepth({ nextItem });
  let depth = projectedDepth;
  if (projectedDepth >= maxDepth) {
    depth = maxDepth;
  } else if (projectedDepth < minDepth) {
    depth = minDepth;
  }
  return { depth, maxDepth, minDepth, parentId: getParentId() };
  function getParentId() {
    if (depth === 0 || !previousItem) {
      return null;
    }
    if (depth === previousItem.depth) {
      return previousItem.parentId;
    }
    if (depth > previousItem.depth) {
      return previousItem.id;
    }
    const newParent = newItems.slice(0, overItemIndex).reverse().find((item) => item.depth === depth)?.parentId;
    return newParent ?? null;
  }
}
function getMaxDepth({ previousItem }) {
  if (previousItem) {
    return previousItem.depth + 1;
  }
  return 0;
}
function getMinDepth({ nextItem }) {
  if (nextItem) {
    return nextItem.depth;
  }
  return 0;
}
function flatten(items, parentId = null, depth = 0, childrenProp) {
  return items.reduce((acc, item, index) => {
    const children = item[childrenProp] || [];
    return [
      ...acc,
      { ...item, parentId, depth, index },
      ...flatten(children, item.id, depth + 1, childrenProp)
    ];
  }, []);
}
function flattenTree(items, childrenProp) {
  return flatten(items, void 0, void 0, childrenProp);
}
function buildTree(flattenedItems, newIndex, childrenProp) {
  const root = { id: "root", [childrenProp]: [] };
  const nodes = { [root.id]: root };
  const items = flattenedItems.map((item) => ({ ...item, [childrenProp]: [] }));
  let update = {
    id: null,
    parentId: null,
    index: 0
  };
  items.forEach((item, index) => {
    const {
      id,
      index: _index,
      depth: _depth,
      parentId: _parentId,
      ...rest
    } = item;
    const children = item[childrenProp] || [];
    const parentId = _parentId ?? root.id;
    const parent = nodes[parentId] ?? findItem(items, parentId);
    nodes[id] = { id, [childrenProp]: children };
    parent[childrenProp].push({
      id,
      ...rest,
      [childrenProp]: children
    });
    if (index === newIndex) {
      const parentChildren = parent[childrenProp];
      update = {
        id: item.id,
        parentId: parent.id === "root" ? null : parent.id,
        index: parentChildren.length - 1
      };
    }
  });
  if (!update.id) {
    throw new Error("Could not find item");
  }
  return {
    items: root[childrenProp],
    update
  };
}
function findItem(items, itemId) {
  return items.find(({ id }) => id === itemId);
}
function findItemDeep(items, itemId, childrenProp) {
  for (const item of items) {
    const { id } = item;
    const children = item[childrenProp] || [];
    if (id === itemId) {
      return item;
    }
    if (children.length) {
      const child = findItemDeep(children, itemId, childrenProp);
      if (child) {
        return child;
      }
    }
  }
  return void 0;
}
function countChildren(items, count = 0, childrenProp) {
  return items.reduce((acc, item) => {
    const children = item[childrenProp] || [];
    if (children.length) {
      return countChildren(children, acc + 1, childrenProp);
    }
    return acc + 1;
  }, count);
}
function getChildCount(items, id, childrenProp) {
  const item = findItemDeep(items, id, childrenProp);
  const children = item?.[childrenProp] || [];
  return item ? countChildren(children, 0, childrenProp) : 0;
}
function removeChildrenOf(items, ids, childrenProp) {
  const excludeParentIds = [...ids];
  return items.filter((item) => {
    if (item.parentId && excludeParentIds.includes(item.parentId)) {
      const children = item[childrenProp] || [];
      if (children.length) {
        excludeParentIds.push(item.id);
      }
      return false;
    }
    return true;
  });
}

// src/components/common/sortable-tree/keyboard-coordinates.ts
var directions = [
  KeyboardCode.Down,
  KeyboardCode.Right,
  KeyboardCode.Up,
  KeyboardCode.Left
];
var horizontal = [KeyboardCode.Left, KeyboardCode.Right];
var sortableTreeKeyboardCoordinates = (context, indentationWidth) => (event, {
  currentCoordinates,
  context: {
    active,
    over,
    collisionRect,
    droppableRects,
    droppableContainers
  }
}) => {
  if (directions.includes(event.code)) {
    if (!active || !collisionRect) {
      return;
    }
    event.preventDefault();
    const {
      current: { items, offset }
    } = context;
    if (horizontal.includes(event.code) && over?.id) {
      const { depth, maxDepth, minDepth } = getProjection(
        items,
        active.id,
        over.id,
        offset,
        indentationWidth
      );
      switch (event.code) {
        case KeyboardCode.Left:
          if (depth > minDepth) {
            return {
              ...currentCoordinates,
              x: currentCoordinates.x - indentationWidth
            };
          }
          break;
        case KeyboardCode.Right:
          if (depth < maxDepth) {
            return {
              ...currentCoordinates,
              x: currentCoordinates.x + indentationWidth
            };
          }
          break;
      }
      return void 0;
    }
    const containers = [];
    droppableContainers.forEach((container) => {
      if (container?.disabled || container.id === over?.id) {
        return;
      }
      const rect = droppableRects.get(container.id);
      if (!rect) {
        return;
      }
      switch (event.code) {
        case KeyboardCode.Down:
          if (collisionRect.top < rect.top) {
            containers.push(container);
          }
          break;
        case KeyboardCode.Up:
          if (collisionRect.top > rect.top) {
            containers.push(container);
          }
          break;
      }
    });
    const collisions = closestCorners({
      active,
      collisionRect,
      pointerCoordinates: null,
      droppableRects,
      droppableContainers: containers
    });
    let closestId = getFirstCollision(collisions, "id");
    if (closestId === over?.id && collisions.length > 1) {
      closestId = collisions[1].id;
    }
    if (closestId && over?.id) {
      const activeRect = droppableRects.get(active.id);
      const newRect = droppableRects.get(closestId);
      const newDroppable = droppableContainers.get(closestId);
      if (activeRect && newRect && newDroppable) {
        const newIndex = items.findIndex(({ id }) => id === closestId);
        const newItem = items[newIndex];
        const activeIndex = items.findIndex(({ id }) => id === active.id);
        const activeItem = items[activeIndex];
        if (newItem && activeItem) {
          const { depth } = getProjection(
            items,
            active.id,
            closestId,
            (newItem.depth - activeItem.depth) * indentationWidth,
            indentationWidth
          );
          const isBelow = newIndex > activeIndex;
          const modifier = isBelow ? 1 : -1;
          const offset2 = 0;
          const newCoordinates = {
            x: newRect.left + depth * indentationWidth,
            y: newRect.top + modifier * offset2
          };
          return newCoordinates;
        }
      }
    }
  }
  return void 0;
};

// src/components/common/sortable-tree/sortable-tree-item.tsx
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";

// src/components/common/sortable-tree/tree-item.tsx
import { forwardRef } from "react";
import {
  DotsSix,
  FolderIllustration,
  FolderOpenIllustration,
  TagIllustration,
  TriangleRightMini
} from "@medusajs/icons";
import { Badge, clx, IconButton } from "@medusajs/ui";
import { jsx, jsxs } from "react/jsx-runtime";
var TreeItem = forwardRef(
  ({
    childCount,
    clone,
    depth,
    disableSelection,
    disableInteraction,
    ghost,
    handleProps,
    indentationWidth,
    collapsed,
    onCollapse,
    style,
    value,
    disabled,
    wrapperRef,
    ...props
  }, ref) => {
    return /* @__PURE__ */ jsx(
      "li",
      {
        ref: wrapperRef,
        style: {
          paddingLeft: `${indentationWidth * depth}px`
        },
        className: clx("-mb-px list-none", {
          "pointer-events-none": disableInteraction,
          "select-none": disableSelection,
          "[&:first-of-type>div]:border-t-0": !clone
        }),
        ...props,
        children: /* @__PURE__ */ jsxs(
          "div",
          {
            ref,
            style,
            className: clx(
              "bg-ui-bg-base transition-fg relative flex items-center gap-x-3 border-y px-6 py-2.5",
              {
                "border-l": depth > 0,
                "shadow-elevation-flyout bg-ui-bg-base w-fit rounded-lg border-none pr-6 opacity-80": clone,
                "bg-ui-bg-base-hover z-[1] opacity-50": ghost,
                "bg-ui-bg-disabled": disabled
              }
            ),
            children: [
              /* @__PURE__ */ jsx(Handle, { ...handleProps, disabled }),
              /* @__PURE__ */ jsx(
                Collapse,
                {
                  collapsed,
                  onCollapse,
                  clone
                }
              ),
              /* @__PURE__ */ jsx(
                Icon,
                {
                  childrenCount: childCount,
                  collapsed,
                  clone
                }
              ),
              /* @__PURE__ */ jsx(Value, { value }),
              /* @__PURE__ */ jsx(ChildrenCount, { clone, childrenCount: childCount })
            ]
          }
        )
      }
    );
  }
);
TreeItem.displayName = "TreeItem";
var Handle = ({
  listeners,
  attributes,
  disabled
}) => {
  return /* @__PURE__ */ jsx(
    IconButton,
    {
      size: "small",
      variant: "transparent",
      type: "button",
      className: clx("cursor-grab", { "cursor-not-allowed": disabled }),
      disabled,
      ...attributes,
      ...listeners,
      children: /* @__PURE__ */ jsx(DotsSix, {})
    }
  );
};
var Icon = ({ childrenCount, collapsed, clone }) => {
  const isBranch = clone ? childrenCount && childrenCount > 1 : childrenCount;
  const isOpen = clone ? false : !collapsed;
  return /* @__PURE__ */ jsx("div", { className: "flex size-7 items-center justify-center", children: isBranch ? isOpen ? /* @__PURE__ */ jsx(FolderOpenIllustration, {}) : /* @__PURE__ */ jsx(FolderIllustration, {}) : /* @__PURE__ */ jsx(TagIllustration, {}) });
};
var Collapse = ({ collapsed, onCollapse, clone }) => {
  if (clone) {
    return null;
  }
  if (!onCollapse) {
    return /* @__PURE__ */ jsx("div", { className: "size-7", role: "presentation" });
  }
  return /* @__PURE__ */ jsx(
    IconButton,
    {
      size: "small",
      variant: "transparent",
      onClick: onCollapse,
      type: "button",
      children: /* @__PURE__ */ jsx(
        TriangleRightMini,
        {
          className: clx("text-ui-fg-subtle transition-transform", {
            "rotate-90": !collapsed
          })
        }
      )
    }
  );
};
var Value = ({ value }) => {
  return /* @__PURE__ */ jsx("div", { className: "txt-compact-small text-ui-fg-subtle flex-grow truncate", children: value });
};
var ChildrenCount = ({ clone, childrenCount }) => {
  if (!clone || !childrenCount) {
    return null;
  }
  if (clone && childrenCount <= 1) {
    return null;
  }
  return /* @__PURE__ */ jsx(Badge, { size: "2xsmall", color: "blue", className: "absolute -right-2 -top-2", children: childrenCount });
};

// src/components/common/sortable-tree/sortable-tree-item.tsx
import { jsx as jsx2 } from "react/jsx-runtime";
var animateLayoutChanges = ({
  isSorting,
  wasDragging
}) => {
  return !(isSorting || wasDragging);
};
function SortableTreeItem({
  id,
  depth,
  disabled,
  ...props
}) {
  const {
    attributes,
    isDragging,
    isSorting,
    listeners,
    setDraggableNodeRef,
    setDroppableNodeRef,
    transform,
    transition
  } = useSortable({
    id,
    animateLayoutChanges,
    disabled
  });
  const style = {
    transform: CSS.Translate.toString(transform),
    transition
  };
  return /* @__PURE__ */ jsx2(
    TreeItem,
    {
      ref: setDraggableNodeRef,
      wrapperRef: setDroppableNodeRef,
      style,
      depth,
      ghost: isDragging,
      disableSelection: iOS,
      disableInteraction: isSorting,
      disabled,
      handleProps: {
        listeners,
        attributes
      },
      ...props
    }
  );
}

// src/components/common/sortable-tree/sortable-tree.tsx
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
var measuring = {
  droppable: {
    strategy: MeasuringStrategy.Always
  }
};
var dropAnimationConfig = {
  keyframes({ transform }) {
    return [
      { opacity: 1, transform: CSS2.Transform.toString(transform.initial) },
      {
        opacity: 0,
        transform: CSS2.Transform.toString({
          ...transform.final,
          x: transform.final.x + 5,
          y: transform.final.y + 5
        })
      }
    ];
  },
  easing: "ease-out",
  sideEffects({ active }) {
    active.node.animate([{ opacity: 0 }, { opacity: 1 }], {
      duration: defaultDropAnimation.duration,
      easing: defaultDropAnimation.easing
    });
  }
};
function SortableTree({
  collapsible = true,
  childrenProp = "children",
  // "children" is the default children prop name
  enableDrag = true,
  items = [],
  indentationWidth = 40,
  onChange,
  renderValue
}) {
  const [collapsedState, setCollapsedState] = useState({});
  const [activeId, setActiveId] = useState(null);
  const [overId, setOverId] = useState(null);
  const [offsetLeft, setOffsetLeft] = useState(0);
  const [currentPosition, setCurrentPosition] = useState(null);
  const flattenedItems = useMemo(() => {
    const flattenedTree = flattenTree(items, childrenProp);
    const collapsedItems = flattenedTree.reduce(
      (acc, item) => {
        const { id } = item;
        const children = item[childrenProp] || [];
        const collapsed = collapsedState[id];
        return collapsed && children.length ? [...acc, id] : acc;
      },
      []
    );
    return removeChildrenOf(
      flattenedTree,
      activeId ? [activeId, ...collapsedItems] : collapsedItems,
      childrenProp
    );
  }, [activeId, items, childrenProp, collapsedState]);
  const projected = activeId && overId ? getProjection(
    flattenedItems,
    activeId,
    overId,
    offsetLeft,
    indentationWidth
  ) : null;
  const sensorContext = useRef({
    items: flattenedItems,
    offset: offsetLeft
  });
  const [coordinateGetter] = useState(
    () => sortableTreeKeyboardCoordinates(sensorContext, indentationWidth)
  );
  const sensors = useSensors(
    useSensor(PointerSensor),
    useSensor(KeyboardSensor, {
      coordinateGetter
    })
  );
  const sortedIds = useMemo(
    () => flattenedItems.map(({ id }) => id),
    [flattenedItems]
  );
  const activeItem = activeId ? flattenedItems.find(({ id }) => id === activeId) : null;
  useEffect(() => {
    sensorContext.current = {
      items: flattenedItems,
      offset: offsetLeft
    };
  }, [flattenedItems, offsetLeft]);
  function handleDragStart({ active: { id: activeId2 } }) {
    setActiveId(activeId2);
    setOverId(activeId2);
    const activeItem2 = flattenedItems.find(({ id }) => id === activeId2);
    if (activeItem2) {
      setCurrentPosition({
        parentId: activeItem2.parentId,
        overId: activeId2
      });
    }
    document.body.style.setProperty("cursor", "grabbing");
  }
  function handleDragMove({ delta }) {
    setOffsetLeft(delta.x);
  }
  function handleDragOver({ over }) {
    setOverId(over?.id ?? null);
  }
  function handleDragEnd({ active, over }) {
    resetState();
    if (projected && over) {
      const { depth, parentId } = projected;
      const clonedItems = JSON.parse(
        JSON.stringify(flattenTree(items, childrenProp))
      );
      const overIndex = clonedItems.findIndex(({ id }) => id === over.id);
      const activeIndex = clonedItems.findIndex(({ id }) => id === active.id);
      const activeTreeItem = clonedItems[activeIndex];
      clonedItems[activeIndex] = { ...activeTreeItem, depth, parentId };
      const sortedItems = arrayMove2(clonedItems, activeIndex, overIndex);
      const { items: newItems, update } = buildTree(
        sortedItems,
        overIndex,
        childrenProp
      );
      onChange(update, newItems);
    }
  }
  function handleDragCancel() {
    resetState();
  }
  function resetState() {
    setOverId(null);
    setActiveId(null);
    setOffsetLeft(0);
    setCurrentPosition(null);
    document.body.style.setProperty("cursor", "");
  }
  function handleCollapse(id) {
    setCollapsedState((state) => ({
      ...state,
      [id]: !state[id]
    }));
  }
  function getMovementAnnouncement(eventName, activeId2, overId2) {
    if (overId2 && projected) {
      if (eventName !== "onDragEnd") {
        if (currentPosition && projected.parentId === currentPosition.parentId && overId2 === currentPosition.overId) {
          return;
        } else {
          setCurrentPosition({
            parentId: projected.parentId,
            overId: overId2
          });
        }
      }
      const clonedItems = JSON.parse(
        JSON.stringify(flattenTree(items, childrenProp))
      );
      const overIndex = clonedItems.findIndex(({ id }) => id === overId2);
      const activeIndex = clonedItems.findIndex(({ id }) => id === activeId2);
      const sortedItems = arrayMove2(clonedItems, activeIndex, overIndex);
      const previousItem = sortedItems[overIndex - 1];
      let announcement;
      const movedVerb = eventName === "onDragEnd" ? "dropped" : "moved";
      const nestedVerb = eventName === "onDragEnd" ? "dropped" : "nested";
      if (!previousItem) {
        const nextItem = sortedItems[overIndex + 1];
        announcement = `${activeId2} was ${movedVerb} before ${nextItem.id}.`;
      } else {
        if (projected.depth > previousItem.depth) {
          announcement = `${activeId2} was ${nestedVerb} under ${previousItem.id}.`;
        } else {
          let previousSibling = previousItem;
          while (previousSibling && projected.depth < previousSibling.depth) {
            const parentId = previousSibling.parentId;
            previousSibling = sortedItems.find(({ id }) => id === parentId);
          }
          if (previousSibling) {
            announcement = `${activeId2} was ${movedVerb} after ${previousSibling.id}.`;
          }
        }
      }
      return announcement;
    }
    return;
  }
  const announcements = {
    onDragStart({ active }) {
      return `Picked up ${active.id}.`;
    },
    onDragMove({ active, over }) {
      return getMovementAnnouncement("onDragMove", active.id, over?.id);
    },
    onDragOver({ active, over }) {
      return getMovementAnnouncement("onDragOver", active.id, over?.id);
    },
    onDragEnd({ active, over }) {
      return getMovementAnnouncement("onDragEnd", active.id, over?.id);
    },
    onDragCancel({ active }) {
      return `Moving was cancelled. ${active.id} was dropped in its original position.`;
    }
  };
  return /* @__PURE__ */ jsx3(
    DndContext,
    {
      accessibility: { announcements },
      sensors,
      collisionDetection: closestCenter,
      measuring,
      onDragStart: handleDragStart,
      onDragMove: handleDragMove,
      onDragOver: handleDragOver,
      onDragEnd: handleDragEnd,
      onDragCancel: handleDragCancel,
      children: /* @__PURE__ */ jsxs2(SortableContext, { items: sortedIds, strategy: verticalListSortingStrategy, children: [
        flattenedItems.map((item) => {
          const { id, depth } = item;
          const children = item[childrenProp] || [];
          const disabled = typeof enableDrag === "function" ? !enableDrag(item) : !enableDrag;
          return /* @__PURE__ */ jsx3(
            SortableTreeItem,
            {
              id,
              value: renderValue(item),
              disabled,
              depth: id === activeId && projected ? projected.depth : depth,
              indentationWidth,
              collapsed: Boolean(collapsedState[id] && children.length),
              childCount: children.length,
              onCollapse: collapsible && children.length ? () => handleCollapse(id) : void 0
            },
            id
          );
        }),
        createPortal(
          /* @__PURE__ */ jsx3(DragOverlay, { dropAnimation: dropAnimationConfig, children: activeId && activeItem ? /* @__PURE__ */ jsx3(
            SortableTreeItem,
            {
              id: activeId,
              depth: activeItem.depth,
              clone: true,
              childCount: getChildCount(items, activeId, childrenProp) + 1,
              value: renderValue(activeItem),
              indentationWidth: 0
            }
          ) : null }),
          document.body
        )
      ] })
    }
  );
}

// src/pages/categories/common/components/category-tree/category-tree.tsx
import { jsx as jsx4 } from "react/jsx-runtime";
var CategoryTree = ({
  value,
  onChange,
  renderValue,
  enableDrag = true,
  isLoading = false
}) => {
  if (isLoading) {
    return /* @__PURE__ */ jsx4("div", { className: "txt-compact-small relative flex-1 overflow-y-auto", children: Array.from({ length: 10 }).map((_, i) => /* @__PURE__ */ jsx4(CategoryLeafPlaceholder, {}, i)) });
  }
  return /* @__PURE__ */ jsx4(
    SortableTree,
    {
      items: value,
      childrenProp: "category_children",
      collapsible: true,
      enableDrag,
      onChange,
      renderValue
    }
  );
};
var CategoryLeafPlaceholder = () => {
  return /* @__PURE__ */ jsx4("div", { className: "bg-ui-bg-base -mb-px flex h-12 animate-pulse items-center border-y px-6 py-2.5" });
};

// src/pages/categories/[id]/organize/organize-category-form/organize-category-form.tsx
import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
var QUERY = {
  fields: "id,name,parent_category_id,rank,*category_children",
  parent_category_id: "null",
  include_descendants_tree: true,
  limit: 9999
};
var OrganizeCategoryForm = () => {
  const {
    product_categories,
    isPending,
    isError,
    error: fetchError
  } = useProductCategories(QUERY);
  const [snapshot, setSnapshot] = useState2([]);
  const { mutateAsync, isPending: isMutating } = useMutation({
    mutationFn: async ({
      value
    }) => {
      await fetchQuery(`/vendor/product-categories/${value.id}`, {
        method: "POST",
        body: {
          rank: value.rank ?? 0,
          parent_category_id: value.parent_category_id
        }
      });
    },
    onMutate: async (update) => {
      await queryClient.cancelQueries({
        queryKey: categoriesQueryKeys.list(QUERY)
      });
      const previousValue = queryClient.getQueryData(categoriesQueryKeys.list(QUERY));
      const nextValue = {
        ...previousValue,
        product_categories: update.arr
      };
      queryClient.setQueryData(categoriesQueryKeys.list(QUERY), nextValue);
      return {
        previousValue
      };
    },
    onError: (error, _newValue, context) => {
      queryClient.setQueryData(
        categoriesQueryKeys.list(QUERY),
        context?.previousValue
      );
      toast.error(error.message);
    },
    onSettled: async () => {
      await queryClient.invalidateQueries({
        queryKey: categoriesQueryKeys.all
      });
    }
  });
  const handleRankChange = async (value, arr) => {
    const val = {
      id: value.id,
      parent_category_id: value.parentId,
      rank: value.index
    };
    setSnapshot(arr);
    await mutateAsync({ value: val, arr });
  };
  const loading = isPending || isMutating;
  if (isError) {
    throw fetchError;
  }
  return /* @__PURE__ */ jsxs3("div", { className: "flex h-full flex-col overflow-hidden", children: [
    /* @__PURE__ */ jsx5(RouteFocusModal.Header, { children: /* @__PURE__ */ jsx5("div", { className: "flex items-center justify-end", children: loading && /* @__PURE__ */ jsx5(Spinner, { className: "animate-spin" }) }) }),
    /* @__PURE__ */ jsx5(RouteFocusModal.Body, { className: "bg-ui-bg-subtle flex flex-1 flex-col overflow-y-auto", children: /* @__PURE__ */ jsx5(
      CategoryTree,
      {
        renderValue: (item) => item.name,
        value: loading ? snapshot : product_categories || [],
        onChange: handleRankChange
      }
    ) })
  ] });
};

export {
  OrganizeCategoryForm
};
