apps/canvas/front/src/components/resources.tsx

import { Button } from "@/components/ui/button";
import { v4 as uuidv4 } from "uuid";
import { useCallback, useState } from "react";
import { Accordion, AccordionTrigger } from "./ui/accordion";
import { AccordionContent, AccordionItem } from "@radix-ui/react-accordion";
import { AppState, NodeType, useCategories, useMode, useProjectId, useStateStore } from "@/lib/state";
import { CategoryItem } from "@/lib/categories";
import { Icon } from "./icon";

function addResource(i: CategoryItem<NodeType>, store: AppState) {
	const deselected = store.nodes.map((n) => ({
		...n,
		selected: false,
	}));
	store.setNodes(deselected);
	store.addNode({
		id: uuidv4(),
		type: i.type,
		data: i.init,
		selected: true,
		connectable: true,
	} as any); // eslint-disable-line @typescript-eslint/no-explicit-any
}

export function Resources() {
	const store = useStateStore();
	const categories = useCategories();
	const projectId = useProjectId();
	const mode = useMode();
	const onResourceAdd = useCallback(
		(item: CategoryItem<NodeType>) => {
			return () => addResource(item, store);
		},
		[store],
	);

	const [open, setOpen] = useState<string[]>(categories.map((c) => c.title));

	return (
		<>
			<Accordion type="multiple" value={open} onValueChange={(v) => setOpen(v)}>
				{categories.map((c) => (
					<AccordionItem key={c.title} value={c.title} className={"px-3" + (c.active ? " bg-amber-100" : "")}>
						<AccordionTrigger>{c.title}</AccordionTrigger>
						<AccordionContent>
							<div className="flex flex-col space-y-1">
								{c.items.map((item: CategoryItem<NodeType>) => (
									<Button
										key={item.title}
										onClick={onResourceAdd(item)}
										style={{ justifyContent: "flex-start" }}
										disabled={projectId == null || mode !== "edit"}
									>
										<Icon type={item.type} />
										{item.title}
									</Button>
								))}
							</div>
						</AccordionContent>
					</AccordionItem>
				))}
			</Accordion>
		</>
	);
}