import React, { useMemo } from "react";
import { useStateStore } from "@/lib/state";
import { NodeDetails } from "./components/node-details";
import { Actions } from "./components/actions";
import { Canvas } from "./components/canvas";

export function Overview(): React.ReactNode {
	const store = useStateStore();
	const nodes = useMemo(() => {
		return store.nodes.filter((n) => n.type !== "network" && n.type !== "github");
	}, [store.nodes]);
	const isDeployMode = useMemo(() => store.mode === "deploy", [store.mode]);
	return (
		<div className="h-full w-full overflow-auto bg-white p-2">
			<div className="w-full flex flex-row justify-end">
				<Actions />
				<Canvas className="hidden" />
			</div>
			<div className="flex flex-wrap gap-4 pt-2">
				{nodes.map((n) => {
					return (
						<div key={n.id} className="h-fit w-fit rounded-lg border-gray-200 border-2 p-2">
							<NodeDetails node={n} disabled={isDeployMode} showName={true} />
						</div>
					);
				})}
			</div>
		</div>
	);
}