import { Dashboard } from '@mui/icons-material';
import React, { useEffect, useRef, useState } from 'react';
import ReactDOM from 'react-dom';
import ReactDOMServer from 'react-dom/server';
import MoneyForCeos from '../MoneyForCeos/MoneyForCeos';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { store } from '../../ReduxState/store';
import MoneyForCeosPrint from '../MoneyForCeos/MoneyForCeosPrint';

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

	// Render components to static HTML strings
	const htmlA: string = ReactDOMServer.renderToStaticMarkup(
		<Provider store={store}>
			<BrowserRouter>
				<MoneyForCeosPrint />
			</BrowserRouter>
		</Provider>
	);
	// const htmlB: string = ReactDOMServer.renderToStaticMarkup(<ComponentB />);
	// const htmlC: string = ReactDOMServer.renderToStaticMarkup(<ComponentC />);

	useEffect(() => {
		if (containerRef.current) {
			// Render component into the container
			ReactDOM.render(
				<Provider store={store}>
					<BrowserRouter>
						<MoneyForCeos />
					</BrowserRouter>
				</Provider>,
				containerRef.current,
				() => {
					// After render and hooks/effects have run
					setHtmlContent(containerRef.current!.innerHTML);
				}
			);
		}
		// Cleanup on unmount
		return () => {
			if (containerRef.current) {
				ReactDOM.unmountComponentAtNode(containerRef.current);
			}
		};
	}, []);

	return (
		<div>
			<h1>Captured HTML Output</h1>

			<h2>Component A:</h2>
			<pre>{htmlA}</pre>
			{/* <pre dangerouslySetInnerHTML={{ __html: htmlA }} /> */}
			<div ref={containerRef} />
			<pre>{htmlContent}</pre>

			{/* <h2>Component B:</h2>
			<pre>{htmlB}</pre>

			<h2>Component C:</h2>
			<pre>{htmlC}</pre> */}
		</div>
	);
};

export default PrintDashboard;