import type React from 'react';
import { useEffect, useRef, useState } from 'react';
import MoneyForBusinessChart from './MoneyForBusinessChart';
import MoneyForBusinessFooter from './MoneyForBusinessFooter';
import MoneyForCeosBusinessAccordion from './MoneyForCeosBusinessAccordion';
import styles from './MoneyForCeosBusinessBody.module.scss';

const MoneyForCeosBusinessBody: React.FC<{ print: string }> = ({
	print
}: {
	print: string;
}): JSX.Element => {
	const renderMFCBAccordion = () => (
		<MoneyForCeosBusinessAccordion
			accordionDetails={styles.accordionDetails}
			className={`${styles.accordionContainer} ${print ? styles.print : ''}`}
			listOfItems={styles.listOfItems}
			nonSelected={styles.nonSelected}
			selected={styles.selected}
			// print={styles.print || ''}
			print={print ? styles.print : ''}
			forcePrintStyle={styles.print}
		/>
	);

	const containerRef = useRef<HTMLDivElement>(null);
	const [htmlStringRef, setHtmlStringref] = useState<string | undefined>();
	const [cssStringRef, setCssStringref] = useState<string | undefined>();

	useEffect(() => {
		window.scrollTo(0, 0);
		// delay the execution of the code by 100 milliseconds until the data is calculated
		setTimeout(() => {
			const htmlOutput = containerRef.current?.innerHTML;
			const styles = document.querySelectorAll('style');
			const styleStrings: any[] = [];
			styles.forEach((style) => {
				styleStrings.push(style.textContent);
			});
			const cssRules = styleStrings.join('\n');

			const wrapper = document.querySelectorAll('[class^="MoneyForGrowthBody_container"]');
			setHtmlStringref(`<div class="${wrapper[0].className}">${htmlOutput}</div>`);
			// setCssStringref(`:root {--primary-color: #ca1e66;}${cssRules}`);
			setCssStringref(`:root {--primary-color: #90BE04;}${cssRules}`);
		}, 100);
	}, []);

	return (
		<div className={styles.container}>
			{!print && <div className={styles.horizontalLine} />}
			<div ref={containerRef}>{renderMFCBAccordion()}</div>
			<p>Here’s how your valuation changed based on your simulation.</p>
			<MoneyForBusinessChart
				// title="Here’s how your valuation changed based on your simulation."
				width="wide"
			/>
			{!print && (
				<MoneyForBusinessFooter htmlString={htmlStringRef || ''} cssString={cssStringRef || ''} />
			)}
			{/* <ProgressBar/> */}
		</div>
	);
};
export default MoneyForCeosBusinessBody;