import type React from 'react';
import { useEffect, useRef, useState } from 'react';

import MoneyForBusinessFooter from '../../MoneyForCeosBusiness/Components/MoneyForBusinessFooter';
import styles from './MoneyForGrowthBody.module.scss';
import MoneyForGrowthList from './MoneyForGrowthList';
import MoneyForGrowthFooter from '../../MoneyForCeosBusiness/Components/MoneyForGrowthFooter';
import FundingMetersProvider from '../../../Store/CashFlowAnalysis/FundingMeters/FundingMeters-context';

const MoneyForGrowthBody: React.FC<{ revenue: number; print?: boolean }> = (props: {
	revenue: number;
	print?: boolean;
}): JSX.Element => {
	const print = props.print;
	const renderMFCList = () => (
		<FundingMetersProvider>
			<MoneyForGrowthList
				arrowLines={styles.arrowLines}
				arrowLinesOnly={styles.arrowLinesOnly}
				arrowsContainer={styles.arrowsContainer}
				darkerList={styles.darkerList}
				listContainer={styles.listContainer}
				normalRow={styles.normalRow}
				singleSplitColumn={styles.singleSplitColumn}
				splitListContainer={styles.splitListContainer}
				verticalLine={styles.verticalLine}
				revenue={props.revenue}
			/>
		</FundingMetersProvider>
	);

	const containerRef = useRef<HTMLDivElement>(null);

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

	useEffect(() => {
		// 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: #90BE04;}${cssRules}`);
		}, 100);
	}, []);

	return (
		<div className={styles.container}>
			<div ref={containerRef}>{renderMFCList()}</div>
			{!print && (
				<MoneyForGrowthFooter htmlString={htmlStringRef || ''} cssString={cssStringRef || ''} />
			)}
		</div>
	);
};

export default MoneyForGrowthBody;