import { useNodes } from "@xyflow/react";
import { AppNode, useEnv, useProjectId } from "./lib/state";
import { generateDodoConfig } from "./lib/config";
import { useEffect, useMemo, useState } from "react";
import { Card, CardContent } from "./components/ui/card";
import JSONView from "@microlink/react-json-view";

export function Config() {
	const env = useEnv();
	const projectId = useProjectId();
	const [nodes, setNodes] = useState<AppNode[]>([]);
	const n = useNodes<AppNode>();
	useEffect(() => {
		console.log(n);
		if (n && n.length > 0) {
			setNodes(n);
		}
	}, [n, setNodes]);
	const config = useMemo(() => generateDodoConfig(projectId, nodes, env) || {}, [projectId, nodes, env]);
	return (
		<Card className="h-full flex flex-col">
			<CardContent className="flex-1 min-h-0 p-4">
				<div className="h-full p-4 bg-muted rounded-lg overflow-auto">
					<JSONView
						src={config as object}
						theme="rjv-default"
						name={false}
						displayDataTypes={false}
						enableClipboard={true}
						style={{ fontFamily: "JetBrains Mono" }}
					/>
				</div>
			</CardContent>
		</Card>
	);
}