"use client";

import { DragDropProvider } from "@dnd-kit/react";
import { SidebarCategory } from "./SidebarCategory";
import { useSidebarOrder } from "@/hooks/useSidebarOrder";
import { move } from "@dnd-kit/helpers";

interface SortableCategoryListProps {
  activeCategory?: string | null;
  onSelectCategory?: (id: string) => void;
  activeAgent?: string | null;
  onSelectAgent?: (agentName: string) => void;
  activeSubcategory?: string | null;
  onSelectSubcategory?: (subcategoryId: string, parentCategoryId: string) => void;
}

export function SortableCategoryList({
  activeCategory,
  onSelectCategory,
  activeAgent,
  onSelectAgent,
  activeSubcategory,
  onSelectSubcategory,
}: SortableCategoryListProps) {
  const [categories, setCategories] = useSidebarOrder();

  return (
    <DragDropProvider
      onDragEnd={(event) => {
        setCategories(move(categories, event));
      }}
    >
      <div className="flex flex-col gap-0.5 px-2 py-2">
        {categories.map((category, index) => (
          <SidebarCategory
            key={category.id}
            category={category}
            index={index}
            active={activeCategory === category.id}
            onSelect={onSelectCategory}
            activeAgent={activeAgent}
            onSelectAgent={onSelectAgent}
            activeSubcategory={activeSubcategory}
            onSelectSubcategory={onSelectSubcategory}
            activeCategory={activeCategory}
          />
        ))}
      </div>
    </DragDropProvider>
  );
}
