/* eslint-disable react/button-has-type */
import axios from 'axios';

import environment from '../../../Environments/environment';
import styles from './MoneyForGrowthFooter.module.scss';
import type { CompanyDbModel } from '../../Companies/Components/CompaniesComponents.helper';
import { useSelector } from 'react-redux';
import type { RootState } from '../../../ReduxState/store';
import ToolsBottomNavigation from '../../ToolsNavigation/ToolsBottomNavigation/ToolsBottomNavigation';
import ToolsNextTool from '../../ToolsNavigation/ToolsNextTool/ToolsNextTool';
import ToolsWhatIsNext from '../../ToolsNavigation/ToolsWhatIsNext/ToolsWhatIsNext';

const MoneyForGrowthFooter = (props: { htmlString: string; cssString: string }): JSX.Element => {
	const nextToolContent = `
		<p>
			<b>Next tool: Discover where cash is actually coming from.</b>
			<br /><br />
			What’s next? 
			<i>
				Dig into Cash Flow Analytics to uncover where your cash is tied up and how to free it.
				<br />
				Dive deep into your financial engine to understand what’s driving or draining your
				liquidity.
			</i>
		</p>
	`;
	const { dashboard, moneyForCeos, moneyForCeosBusiness, cashFlowSummary } =
		environment.frontendRoutes;
	const selectedCompany: CompanyDbModel | null = useSelector(
		(state: RootState) => state.companies.selectedCompany
	);

	const generateReport = async () => {
		const apiUrl = environment.pdfUrl;
		try {
			const htmlContent = `<style>${props.cssString}</style><body>${props.htmlString}</body>`;
			const response = await axios.post(
				apiUrl,
				{
					htmlContent
				},
				{
					responseType: 'blob' // Set the response type to blob to handle binary data
				}
			);

			// Create a new Blob object from the PDF stream
			const pdfBlob = new Blob([response.data], { type: 'application/pdf' });

			// Create a link element
			const link = document.createElement('a');
			link.href = URL.createObjectURL(pdfBlob); // Create an object URL for the blob
			link.download = `money-for-growth-report-${Date.now()}.pdf`; // Set the file name for the downloaded file

			// Append the link to the body (even though it's not visually rendered)
			document.body.appendChild(link);

			// Programmatically click the link to trigger the download
			link.click();

			// Clean up and remove the link element from the DOM
			document.body.removeChild(link);
		} catch (error) {
			console.error('Error downloading PDF:', error);
		}
	};

	return (
		<div className={styles.container}>
			<ToolsBottomNavigation
				stepNumber={1}
				maxSteps={1}
				prevAction={{
					title: 'Back to Multiplier Simulator',
					link: moneyForCeos
				}}
				reportGenerated={(e) => {
					e.preventDefault();
					generateReport();
				}}
			/>

			{selectedCompany?.plan.id !== 2 && (
				<ToolsNextTool
					content={nextToolContent}
					nextAction={{
						title: 'Analyse my cash flow now',
						link: cashFlowSummary
					}}
				/>
			)}
			{selectedCompany?.plan.id === 2 && (
				<ToolsWhatIsNext
					prevAction={{
						title: 'Revisit my strategy',
						content:
							'Tune my strategy Now that you know your funding requirements, revisit your multiplier levers to tune for better outcomes.',
						link: moneyForCeos
					}}
					nextAction={{
						title: 'Go to Dashboard',
						content:
							'Head to your Dashboard for a clear, visual summary of your multiplier levers and growth strategy – all in one place.',
						link: dashboard
					}}
				/>
			)}
		</div>
	);
};

export default MoneyForGrowthFooter;
