/* eslint-disable react/jsx-no-bind */
/* eslint-disable jsx-a11y/label-has-for */
/* eslint-disable jsx-a11y/label-has-associated-control */
/* eslint-disable react/destructuring-assignment */
/* eslint-disable react/no-unused-prop-types */
import { FormControl, InputLabel } from '@mui/material';
import { styled } from '@mui/material/styles';
import { useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
import type React from 'react';
import { useSelector } from 'react-redux';

import styles from './FinancialsForPrintPreview.module.scss';
import type { FinancialsModel } from '../Financials/Components/FinancialsForm/FinancialsForm.helper';
import type { RootState } from '../../ReduxState/store';
import type { CompanyDbModel } from '../Companies/Components/CompaniesComponents.helper';

export interface Action {
	type: string;
	value: string;
}

interface FormInterface {
	companyId: string;
	financialsId: string;
	changeHandler: () => void;
	itemForEdit: FinancialsModel;
	companyType: string;
}

const FinancialsForPrintPreview: React.FC = (): JSX.Element => {
	const selectedCompany = useSelector(
		(state: RootState): CompanyDbModel | null => state.companies.selectedCompany
	);
	const financialsList = useSelector(
		(state: RootState): FinancialsModel[] | null => state.financials.financialsList
	);
	const selectedFinancials = useSelector(
		(state: RootState): FinancialsModel[] | null => state.financials.selectedFinancials
	);
	// const financialsForm: FinancialsTypeContextModel = useContext(FinancialsFormContext);

	const getTitle = () => {
		if (!selectedCompany || selectedCompany.plan.id <= 1) {
			return 'Preview Demo Financials';
		}
		return 'Your Financial Data';
	};

	const isPaidPlan = (): boolean => !!(selectedCompany && selectedCompany?.plan.id > 1);

	const isDemoPlan = (): boolean => !!(selectedCompany && selectedCompany?.plan.id === 1);
	const defaultValue =
		typeof selectedCompany?.currency_symbol === 'string'
			? selectedCompany?.currency_symbol
			: `${selectedCompany?.currency_symbol.label}0.00`;

	const formatValueToCurrency = (value: string | undefined): string => {
		if (!value) return '';

		return new Intl.NumberFormat('en-GB', {
			style: 'currency',
			currency:
				typeof selectedCompany?.currency_symbol === 'string'
					? selectedCompany?.currency_symbol
					: selectedCompany?.currency_symbol.value
		}).format(+value);
	};

	return (
		<div className={styles.formContainer}>
			<div className={`${styles.financials_for_print_preview} pageBreakAfter`}>
				<h3>{getTitle()}</h3>
				<h5>Reporting Period</h5>
				<div>
					<label>Financials Year End</label>
					<div>
						<div>YE{selectedFinancials?.[0]?.input['Year Ending']}</div>
						<div>YE{selectedFinancials?.[1]?.input['Year Ending']}</div>
						<div>YE{selectedFinancials?.[2]?.input['Year Ending']}</div>
					</div>
				</div>
				<h5>Base Numbers</h5>
				<div />
				<div>
					<label>Revenue</label>
					<div>
						<div>{formatValueToCurrency(selectedFinancials?.[0]?.input.Revenue)}</div>
						<div>{formatValueToCurrency(selectedFinancials?.[1]?.input.Revenue)}</div>
						<div>{formatValueToCurrency(selectedFinancials?.[2]?.input.Revenue)}</div>
					</div>
				</div>
				<div>
					<label>Cost of Sales (CoGS)</label>
					<div>
						<div>{formatValueToCurrency(selectedFinancials?.[0]?.input.COGS)}</div>
						<div>{formatValueToCurrency(selectedFinancials?.[1]?.input.COGS)}</div>
						<div>{formatValueToCurrency(selectedFinancials?.[2]?.input.COGS)}</div>
					</div>
				</div>
				<div>
					<label>Gross Profit</label>
					<div>
						<div>{formatValueToCurrency(selectedFinancials?.[0]?.input['Gross Profit'])}</div>
						<div>{formatValueToCurrency(selectedFinancials?.[1]?.input['Gross Profit'])}</div>
						<div>{formatValueToCurrency(selectedFinancials?.[2]?.input['Gross Profit'])}</div>
					</div>
				</div>
				<div>
					<label>Direct Labour</label>
					<div>
						<div>{formatValueToCurrency(selectedFinancials?.[0]?.input['Direct Labour'])}</div>
						<div>{formatValueToCurrency(selectedFinancials?.[1]?.input['Direct Labour'])}</div>
						<div>{formatValueToCurrency(selectedFinancials?.[2]?.input['Direct Labour'])}</div>
					</div>
				</div>
				<div>
					<label>EBIT</label>
					<div>
						<div>{formatValueToCurrency(selectedFinancials?.[0]?.input.EBIT)}</div>
						<div>{formatValueToCurrency(selectedFinancials?.[1]?.input.EBIT)}</div>
						<div>{formatValueToCurrency(selectedFinancials?.[2]?.input.EBIT)}</div>
					</div>
				</div>
				<div>
					<label>Net Profit</label>
					<div>
						<div>{formatValueToCurrency(selectedFinancials?.[0]?.input['Net Profit'])}</div>
						<div>{formatValueToCurrency(selectedFinancials?.[1]?.input['Net Profit'])}</div>
						<div>{formatValueToCurrency(selectedFinancials?.[2]?.input['Net Profit'])}</div>
					</div>
				</div>
				<h5>Other Information</h5>
				<div />
				<div>
					<label>Depreciation & Amortisation</label>
					<div>
						<div>{formatValueToCurrency(selectedFinancials?.[0]?.input.Depreciation)}</div>
						<div>{formatValueToCurrency(selectedFinancials?.[1]?.input.Depreciation)}</div>
						<div>{formatValueToCurrency(selectedFinancials?.[2]?.input.Depreciation)}</div>
					</div>
				</div>
				<div>
					<label>Interest Paid / Received</label>
					<div>
						<div>{formatValueToCurrency(selectedFinancials?.[0]?.input['Interest Paid'])}</div>
						<div>{formatValueToCurrency(selectedFinancials?.[1]?.input['Interest Paid'])}</div>
						<div>{formatValueToCurrency(selectedFinancials?.[2]?.input['Interest Paid'])}</div>
					</div>
				</div>
				<div>
					<label>Other Income / Expenses</label>
					<div>
						<div>{formatValueToCurrency(selectedFinancials?.[0]?.input['Other Income'])}</div>
						<div>{formatValueToCurrency(selectedFinancials?.[1]?.input['Other Income'])}</div>
						<div>{formatValueToCurrency(selectedFinancials?.[2]?.input['Other Income'])}</div>
					</div>
				</div>
				<div>
					<label>Dividends / Drawings</label>
					<div>
						<div>{formatValueToCurrency(selectedFinancials?.[0]?.input.Dividends)}</div>
						<div>{formatValueToCurrency(selectedFinancials?.[1]?.input.Dividends)}</div>
						<div>{formatValueToCurrency(selectedFinancials?.[2]?.input.Dividends)}</div>
					</div>
				</div>
			</div>

			<div className={`${styles.financials_for_print_preview} pageBreakAfter`}>
				<h3 style={{ marginTop: '80px' }}>Balance Sheet</h3>
				<h5>Assets</h5>
				<div />
				<div>
					<label>Cash at Bank and In Hand</label>
					<div>
						<div>{formatValueToCurrency(selectedFinancials?.[0]?.input['Cash at Bank'])}</div>
						<div>{formatValueToCurrency(selectedFinancials?.[1]?.input['Cash at Bank'])}</div>
						<div>{formatValueToCurrency(selectedFinancials?.[2]?.input['Cash at Bank'])}</div>
					</div>
				</div>
				<div>
					<label>Trade Debtors</label>
					<div>
						<div>{formatValueToCurrency(selectedFinancials?.[0]?.input['Trade Debtors'])}</div>
						<div>{formatValueToCurrency(selectedFinancials?.[1]?.input['Trade Debtors'])}</div>
						<div>{formatValueToCurrency(selectedFinancials?.[2]?.input['Trade Debtors'])}</div>
					</div>
				</div>
				<div>
					<label>Stock / Work-in-progress</label>
					<div>
						<div>{formatValueToCurrency(selectedFinancials?.[0]?.input.Stock)}</div>
						<div>{formatValueToCurrency(selectedFinancials?.[1]?.input.Stock)}</div>
						<div>{formatValueToCurrency(selectedFinancials?.[2]?.input.Stock)}</div>
					</div>
				</div>
				<div>
					<label>Total Current Assets</label>
					<div>
						<div>
							{formatValueToCurrency(
								selectedFinancials?.[0]?.input['Additional Total Current Assets']
							)}
						</div>
						<div>
							{formatValueToCurrency(
								selectedFinancials?.[1]?.input['Additional Total Current Assets']
							)}
						</div>
						<div>
							{formatValueToCurrency(
								selectedFinancials?.[2]?.input['Additional Total Current Assets']
							)}
						</div>
					</div>
				</div>
				<div>
					<label>Fixed Assets</label>
					<div>
						<div>
							{formatValueToCurrency(selectedFinancials?.[0]?.input['Additional Fixed Assets'])}
						</div>
						<div>
							{formatValueToCurrency(selectedFinancials?.[1]?.input['Additional Fixed Assets'])}
						</div>
						<div>
							{formatValueToCurrency(selectedFinancials?.[2]?.input['Additional Fixed Assets'])}
						</div>
					</div>
				</div>
				<div>
					<label>Total Assets</label>
					<div>
						<div>
							{formatValueToCurrency(selectedFinancials?.[0]?.input['Additional Total Assets'])}
						</div>
						<div>
							{formatValueToCurrency(selectedFinancials?.[1]?.input['Additional Total Assets'])}
						</div>
						<div>
							{formatValueToCurrency(selectedFinancials?.[2]?.input['Additional Total Assets'])}
						</div>
					</div>
				</div>
				<h5>Liabilities</h5>
				<div />
				<div>
					<label>Trade Creditors</label>
					<div>
						<div>{formatValueToCurrency(selectedFinancials?.[0]?.input['Trade Creditors'])}</div>
						<div>{formatValueToCurrency(selectedFinancials?.[1]?.input['Trade Creditors'])}</div>
						<div>{formatValueToCurrency(selectedFinancials?.[2]?.input['Trade Creditors'])}</div>
					</div>
				</div>
				<div>
					<label>Deferred Revenue</label>
					<div>
						<div>{formatValueToCurrency(selectedFinancials?.[0]?.input['Deferred Revenue'])}</div>
						<div>{formatValueToCurrency(selectedFinancials?.[1]?.input['Deferred Revenue'])}</div>
						<div>{formatValueToCurrency(selectedFinancials?.[2]?.input['Deferred Revenue'])}</div>
					</div>
				</div>
				<div>
					<label>Total Current Liabilities</label>
					<div>
						<div>
							{formatValueToCurrency(
								selectedFinancials?.[0]?.input['Additional Total Current Liabilities']
							)}
						</div>
						<div>
							{formatValueToCurrency(
								selectedFinancials?.[1]?.input['Additional Total Current Liabilities']
							)}
						</div>
						<div>
							{formatValueToCurrency(
								selectedFinancials?.[2]?.input['Additional Total Current Liabilities']
							)}
						</div>
					</div>
				</div>
				<div>
					<label>Total Liabilities</label>
					<div>
						<div>
							{formatValueToCurrency(
								selectedFinancials?.[0]?.input['Additional Total Liabilities']
							)}
						</div>
						<div>
							{formatValueToCurrency(
								selectedFinancials?.[1]?.input['Additional Total Liabilities']
							)}
						</div>
						<div>
							{formatValueToCurrency(
								selectedFinancials?.[2]?.input['Additional Total Liabilities']
							)}
						</div>
					</div>
				</div>
				<h5>Funding</h5>
				<div />
				<div>
					<label>Bank Loans - Current</label>
					<div>
						<div>
							{formatValueToCurrency(
								selectedFinancials?.[0]?.input['Additional Bank Loans - Current']
							)}
						</div>
						<div>
							{formatValueToCurrency(
								selectedFinancials?.[1]?.input['Additional Bank Loans - Current']
							)}
						</div>
						<div>
							{formatValueToCurrency(
								selectedFinancials?.[2]?.input['Additional Bank Loans - Current']
							)}
						</div>
					</div>
				</div>
				<div>
					<label>Bank Loans - Non Current</label>
					<div>
						<div>
							{formatValueToCurrency(
								selectedFinancials?.[0]?.input['Additional Bank Loans - Non Current']
							)}
						</div>
						<div>
							{formatValueToCurrency(
								selectedFinancials?.[1]?.input['Additional Bank Loans - Non Current']
							)}
						</div>
						<div>
							{formatValueToCurrency(
								selectedFinancials?.[2]?.input['Additional Bank Loans - Non Current']
							)}
						</div>
					</div>
				</div>
			</div>
		</div>
	);
};

export default FinancialsForPrintPreview;