/* eslint-disable react/jsx-no-bind */
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable react/button-has-type */
/* eslint-disable jsx-a11y/anchor-is-valid */
/* eslint-disable @typescript-eslint/no-unused-vars */
import { useContext, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Link, useNavigate } from 'react-router-dom';

import environment from '../../Environments/environment';
import type { RootState } from '../../ReduxState/store';
import type { CashFlowMetricModel } from '../../Store/CashFlowAnalysis/CashFlowMetric/CashFlowMetric-context';
import { CashFlowMetricContext } from '../../Store/CashFlowAnalysis/CashFlowMetric/CashFlowMetric-context';
import FinancialsContextProvider from '../../Store/Financials/financials-context';
import type { FinancialsModel } from '../Financials/Components/FinancialsForm/FinancialsForm.helper';
import LandingPagePicture from '../LandingPage/LandingPagePicture';
import DebtToEquityChart from './Components/Funding/DebtToEquityChart';
import NetDebtChart from './Components/Funding/NetDebtChart';
import OperatingCashFlowChart from './Components/Funding/OperatingCashFlowChart';
import OperatingCashProfitChart from './Components/Funding/OperatingCashProfitChart';
import YourFundingChart from './Components/Funding/YourFundingChart';
import GrowthStrategyChart from './Components/MoneyForGrowth/GrowthStrategyChart';
import MoneyForGrowthSurplusShortfallChart from './Components/MoneyForGrowth/MoneyForGrowthSurplusShortfallChart';
import NetProfitPreTaxChart from './Components/MoneyForGrowth/NetProfitPreTaxChart';
import EbitChart from './Components/MoneyMultiplier/EbitChart';
import MoneyMultiplierEffectOnBusinessValueChart from './Components/MoneyMultiplier/MoneyMultiplierEffectOnBusinessValueChart';
import MoneyMultiplierEffectOnNetCashFlowAndEbitContainer from './Components/MoneyMultiplier/MoneyMultiplierEffectOnNetCashFlowAndEbitContainer';
import NetCashFlowChart from './Components/MoneyMultiplier/NetCashFlowChart';
import DirectLaborEfficiencyRatioChart from './Components/Profitability/DirectLaborEfficiencyRatioChart';
import ProfitabilityTrendsChart from './Components/Profitability/ProfitabilityTrendsChart';
import RevenueVsDirectCostGrowthChart from './Components/Profitability/RevenueVsDirectCostGrowthChart';
import ReturnOnEquityChart from './Components/Returns/ReturnOnEquityChart';
import ReturnOnTotalAssetsChart from './Components/Returns/ReturnOnTotalAssetsChart';
import ReturnsOnInvestedCapitalChart from './Components/Returns/ReturnsOnInvestedCapitalChart';
import WorkingCapitalChart from './Components/WorkingCapacity/WorkingCapitalChart';
import WorkingCapitalTimelineChart from './Components/WorkingCapacity/WorkingCapitalTimelineChart';
import WorkingCapitalGaugeChart from './Components/WorkingCapitalGaugeChart/WorkingCapitalGaugeChart';
import styles from './DashboardForPrintPreview.module.scss';
import MoneyForBusinessChart from '../MoneyForCeosBusiness/Components/MoneyForBusinessChart';

const DashboardForPrintPreview = (): JSX.Element => {
	const selectedFinancials = useSelector(
		(state: RootState): FinancialsModel[] | null => state.financials.selectedFinancials
	);
	const financials = useSelector(
		(state: RootState): FinancialsModel[] | null => state.financials.financialsList
	);

	const cashFlowMetricContext: CashFlowMetricModel = useContext(CashFlowMetricContext);
	const navigate = useNavigate();
	const [showPopup, setShowPopup] = useState<boolean>(false);
	const { financials: financialsRoute } = environment.frontendRoutes;
	const containerRef = useRef<HTMLDivElement>(null);

	const renderCondition = () => {
		if (financials && financials.length > 0) {
			// if there are financials but none are selected
			// naviage to select from financials page
			// navigate(financialsRoute);
			// do nothing let the real dashboard handle the navigation
		} else {
			return (
				<div className={styles.landingPage}>
					<LandingPagePicture />
					<p>No financials added yet</p>
					<button className={styles.addFinancialsButton}>
						<Link to={financialsRoute}>Add financials</Link>
					</button>
				</div>
			);
		}
	};

	const renderCharts = () => (
		<>
			<div className={`${styles.groupContainer} pageBreakAfter`}>
				<h2 className={styles.chartsTitle}>Profitability Charts</h2>
				<div className={[styles.groupWrapper, styles.pageBreakAfter].join(' ')}>
					<div className={styles.chartWrapper}>
						<div id="profitabilityTrends" className="printChart">
							<ProfitabilityTrendsChart />
						</div>
					</div>

					<div className={[styles.chartWrapper, styles.pageBreakAfter].join(' ')}>
						<div id="revenueGrowthVsDirectCostGrowth" className="printChart">
							<RevenueVsDirectCostGrowthChart />
						</div>
					</div>

					<div className={[styles.chartWrapper, styles.pageBreakAfter].join(' ')}>
						<div id="directLabourEfficiencyRatio" className="printChart">
							<DirectLaborEfficiencyRatioChart />
						</div>
					</div>
				</div>
			</div>

			<div className={styles.groupContainer} style={{ marginTop: '490px' }}>
				<h2 className={styles.chartsTitle}>Working Capital Charts</h2>
				<div className={[styles.groupWrapper].join(' ')}>
					<div className={[styles.container__main__chart__chart5, styles.pageBreakAfter].join(' ')}>
						<div className="w-100 p-4">
							<div id="workingCapitalTimeline" className="workingCapitalTimelineChart">
								<WorkingCapitalTimelineChart />
							</div>
						</div>
					</div>
				</div>
				<div className={[styles.groupWrapper, styles.pageBreakAfter].join(' ')}>
					<div
						className={[styles.container__main__chart__chart1, 'workingCapital'].join(' ')}
						style={{ padding: '0' }}
					>
						<div className="w-100 gaugeChart">
							<aside className={styles.container__main__chart__chart1__title} id="workingCapital">
								<WorkingCapitalGaugeChart />
							</aside>
						</div>
					</div>

					<div
						className={`${[styles.container__main__chart__chart2, styles.pageBreakAfter].join(
							' '
						)}, chartWrapper`}
						id="marginalCashflowImpactOfVolume"
					>
						<h3>Marginal Cashflow - Impact Of Volume On Your Cash Flow</h3>
						<WorkingCapitalChart
							dataOne={+cashFlowMetricContext.marginalCashFlow}
							dataTwo={+cashFlowMetricContext.marginalCashFlowSecond}
							firstDate={cashFlowMetricContext.secondYear}
							secondDate={cashFlowMetricContext.thirdYear}
						/>
					</div>
				</div>
			</div>

			<div className={`${styles.groupContainer} pageBreakAfter`} style={{ marginTop: '210px' }}>
				<h2 className={styles.chartsTitle}>Returns Charts</h2>
				<div className={[styles.groupWrapper, styles.pageBreakAfter].join(' ')}>
					<div
						className={[
							styles.container__main__chart__chart4,
							styles.container__main__chart__smallCharts,
							styles.pageBreakAfter
						].join(' ')}
					>
						<div id="returnOnInvestedCapital" className="gaugeChart">
							<ReturnsOnInvestedCapitalChart />
						</div>
					</div>

					<div
					// className={[
					// 	styles.container__main__chart__chart4,
					// 	styles.container__main__chart__smallCharts
					// ].join(' ')}
					>
						<div id="returnOnTotalAssets" className="gaugeChart" style={{ height: '117px' }}>
							<ReturnOnTotalAssetsChart />
						</div>
					</div>

					<div
						className={[
							styles.container__main__chart__chart4,
							styles.container__main__chart__smallCharts,
							styles.pageBreakAfter
						].join(' ')}
					>
						<div id="returnOnEquity" className="gaugeChart">
							<ReturnOnEquityChart />
						</div>
					</div>
				</div>
			</div>

			<div className={`${styles.groupContainer} pageBreakAfter`} style={{ marginTop: '630px' }}>
				<h2 className={styles.chartsTitle}>Funding Charts</h2>
				<div className={[styles.groupWrapper, styles.pageBreakAfter].join(' ')}>
					<div
						className={`${[
							styles.container__main__chart__chart4,
							styles.container__main__chart__smallCharts
						].join(' ')}`}
					>
						<div id="OperatingCashProfit" className="printChart bubleChart">
							<OperatingCashProfitChart />
						</div>
					</div>

					<div
						className={[
							styles.container__main__chart__chart4,
							styles.container__main__chart__smallCharts
						].join(' ')}
					>
						<div id="yourFunding" className="printChart bubleChart">
							<YourFundingChart />
						</div>
					</div>

					<div
						className={[
							styles.container__main__chart__chart4,
							styles.container__main__chart__smallCharts
						].join(' ')}
					>
						<div id="operatingCashFlow" className="printChart bubleChart">
							<OperatingCashFlowChart />
						</div>
					</div>

					<div
						className={[
							styles.container__main__chart__chart4,
							styles.container__main__chart__smallCharts,
							styles.pageBreakAfter
						].join(' ')}
					>
						<div id="netDebt" className="printChart bubleChart">
							<NetDebtChart />
						</div>
					</div>

					<div
						className={[
							styles.container__main__chart__chart4,
							styles.container__main__chart__smallCharts
						].join(' ')}
					>
						<div id="debtToEquity" className="gaugeChart">
							<DebtToEquityChart />
						</div>
					</div>
				</div>
			</div>

			<div className={styles.groupContainer} style={{ marginTop: '680px' }}>
				<h2 className={styles.chartsTitle}>Money For Growth Charts</h2>
				<div className={[styles.groupWrapper, styles.pageBreakAfter].join(' ')}>
					<div
						className={[
							styles.container__main__chart__chart4,
							styles.container__main__chart__smallCharts,
							styles.pageBreakAfter
						].join(' ')}
					>
						<div id="netProfitPreTax" className="printChart">
							<NetProfitPreTaxChart />
						</div>
					</div>

					<div
						className={[
							styles.container__main__chart__chart4,
							styles.container__main__chart__smallCharts
						].join(' ')}
					>
						<div id="yourMoneyForGrowthSurplusShortfall" className="printChart bubleChart">
							<MoneyForGrowthSurplusShortfallChart />
						</div>
					</div>

					<div
						className={[
							styles.container__main__chart__chart4,
							styles.container__main__chart__smallCharts,
							styles.pageBreakAfter
						].join(' ')}
					>
						<div id="yourGrowthStrategy" className="printChart">
							<GrowthStrategyChart />
						</div>
					</div>
				</div>
			</div>

			<div className={styles.groupContainer} style={{ marginTop: '300px' }}>
				<h2 className={styles.chartsTitle}>Money Multiplyer Charts</h2>
				<div
					className={[styles.groupWrapper, styles.pageBreakAfter].join(' ')}
					style={{ marginTop: '20px' }}
				>
					<div
						className={`${[
							styles.container__main__chart__chart4,
							styles.container__main__chart__smallCharts
						].join(' ')}`}
					>
						<div id="netCashFlow" className="printChart bubleChart">
							<NetCashFlowChart />
						</div>
					</div>

					<div
						className={[
							styles.container__main__chart__chart4,
							styles.container__main__chart__smallCharts,
							styles.pageBreakAfter
						].join(' ')}
					>
						<div id="ebitOperatingProfit" className="printChart bubleChart">
							<EbitChart />
						</div>
					</div>

					<div
						className={`${[
							styles.container__main__chart__chart4,
							styles.netCashFlow,
							styles.pageBreakAfter
						].join(' ')} pdfMarginTop`}
					>
						<div id="theMoneyMultiplierEffectOnNetCashFlowAndEbit" className="printChart">
							<MoneyMultiplierEffectOnNetCashFlowAndEbitContainer />
						</div>
					</div>

					<div
						className={`${[
							styles.container__main__chart__chart4,
							styles.container__main__chart__smallCharts,
							styles.moneyEffectOnBusinessValue
						].join(' ')} pdfMarginTop`}
					>
						<div id="moneyMultiplierEffectOnYourBusinessValue" className="printChart">
							<MoneyForBusinessChart title="Money Multiplier effect on your business value" />
						</div>
					</div>
				</div>
			</div>
		</>
	);

	return (
		<div className={styles.container}>
			{selectedFinancials && selectedFinancials.length > 0 ? (
				<FinancialsContextProvider>
					<div className={styles.container__main}>
						<div ref={containerRef} className={styles.container__main__chart}>
							{renderCharts()}
						</div>
					</div>
					{showPopup && (
						<div className={styles.popupMenu}>
							<div
								style={{
									textAlign: 'center'
								}}
							>
								<h4>Dashboard</h4>
								<Link to="/manageSubscriptions">
									Please upgrade your plan to be able to see calculations from Cash Flow Analytics
								</Link>
							</div>
						</div>
					)}
				</FinancialsContextProvider>
			) : (
				renderCondition()
			)}
		</div>
	);
};

export default DashboardForPrintPreview;