import { useStateStore } from "./lib/state";
import { generateDodoConfig } from "./lib/config";
import JSONView from "@microlink/react-json-view";
import { useMemo } from "react";

export function Config(): React.ReactNode {
	const store = useStateStore();
	const config = useMemo(
		() => generateDodoConfig(store.projectId, store.nodes, store.env),
		[store.projectId, store.nodes, store.env],
	);
	const cleaned = useMemo(() => {
		if (config == null) {
			return null;
		}
		const { input: _, ...rest } = config;
		return rest;
	}, [config]);
	return (
		<div className="h-full p-4 bg-muted overflow-auto text-xs">
			<JSONView
				src={cleaned as object}
				theme="rjv-default"
				name={false}
				displayDataTypes={false}
				enableClipboard={true}
				style={{ fontFamily: "JetBrains Mono" }}
			/>
		</div>
	);
}