import React, { useRef, useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import { store } from '../../ReduxState/store';
import MoneyForCeosPrint from '../MoneyForCeos/MoneyForCeosPrint';
import MoneyForCeosBusinessPrint from '../MoneyForCeosBusiness/MoneyForCeosBusinessPrint';
import MoneyForGrowth from '../MoneyForGrowth/MoneyForGrowth';

// Define your components array
const componentsToRender = [
	{ component: MoneyForCeosPrint, props: {} },
	{ component: MoneyForCeosBusinessPrint, props: {} },
	{ component: MoneyForGrowth, props: {} }
	// Add more components as needed
];

const PrintDashboard: React.FC = () => {
	const containerRef = useRef<HTMLDivElement | null>(null);
	const [htmlContent, setHtmlContent] = useState<string>('');

	useEffect(() => {
		if (containerRef.current) {
			// Unmount previous components if any
			ReactDOM.unmountComponentAtNode(containerRef.current);

			// Render all components dynamically
			ReactDOM.render(
				<>
					{componentsToRender.map((comp, index) => {
						const Component = comp.component;
						return (
							<Provider key={index} store={store}>
								<BrowserRouter>
									<Component {...comp.props} />
								</BrowserRouter>
							</Provider>
						);
					})}
				</>,
				containerRef.current,
				() => {
					// Capture the combined HTML after all components are mounted and effects run
					setHtmlContent(containerRef.current!.innerHTML);
				}
			);
		}

		// Cleanup on unmount
		return () => {
			if (containerRef.current) {
				ReactDOM.unmountComponentAtNode(containerRef.current);
			}
		};
	}, []);

	return (
		<div>
			<h2>Rendered Components HTML:</h2>
			{/* <div ref={containerRef} style={{ display: 'none' }} /> */}
			<div ref={containerRef} />
			<pre>{htmlContent}</pre>
		</div>
	);
};

export default PrintDashboard;