import { useNodes } from "@xyflow/react";
import { AppNode, useEnv, useProjectId } from "./lib/state";
import { generateDodoConfig } from "./lib/config";
import { useEffect, useMemo, useState } from "react";
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 (
		<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>
	);
}