import React, { useMemo } from "react";
import { useStateStore, ServiceNode } 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(() => store.nodes, [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
					.filter((n): n is ServiceNode => n.type === "app")
					.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} />
							</div>
						);
					})}
			</div>
		</div>
	);
}