import { useNodes } from "@xyflow/react";
import { AppNode, useEnv, useProjectId } from "./lib/state";
import { generateDodoConfig } from "./lib/config";
import { useEffect, useMemo, useState } from "react";

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]);
	const configS = useMemo(() => JSON.stringify(config, undefined, 4), [config]);
	return (
		<div className="px-5">
			<pre>{configS}</pre>
		</div>
	);
}