/* eslint-disable react/destructuring-assignment */
import type React from 'react';
import { useContext } from 'react';

import type { CashFlowAnalysisModel } from '../../../../Store/CashFlowAnalysis/CashFlowSummary/CahsFlowAnalysisSummary-context';
import { CashFlowAnalysisContext } from '../../../../Store/CashFlowAnalysis/CashFlowSummary/CahsFlowAnalysisSummary-context';
import CashFlowCard from './UI/CashFlowCard';
import { useSelector } from 'react-redux';
import type { RootState } from '../../../../ReduxState/store';
import type { CompanyDbModel } from '../../../Companies/Components/CompaniesComponents.helper';
import getCompanyType from '../../../../utils/getCompanyType';

interface Cards {
	container: string;
	card: string;
}

const CashFlowCards: React.FC<Cards> = (props: Cards): JSX.Element => {
	const selectedCompany = useSelector(
		(state: RootState): CompanyDbModel | null => state.companies.selectedCompany
	);
	const companyType = getCompanyType(selectedCompany);
	const cashFlowAnalysisContext: CashFlowAnalysisModel = useContext(CashFlowAnalysisContext);
	const {
		grossMargin,
		debtorsDays,
		investmentInWorkingCapital,
		ebitPercentOfGrossMargin,
		ebitPercentOfRevenue,
		netProfitBeforeTax,
		stockDays,
		creditorsDays
	} = cashFlowAnalysisContext;

	return (
		<div className={props.container}>
			<CashFlowCard
				card={props.card}
				classNameTitle=""
				name="Gross Margin"
				sign="%"
				title=""
				value={grossMargin}
			/>
			<CashFlowCard
				card={props.card}
				classNameTitle=""
				name="Investment in Working Capital"
				sign="%"
				title=""
				value={investmentInWorkingCapital}
			/>
			<CashFlowCard
				card={props.card}
				classNameTitle=""
				name="EBIT (% of Revenue)"
				sign="%"
				title=""
				value={ebitPercentOfRevenue}
			/>
			<CashFlowCard
				card={props.card}
				classNameTitle=""
				name="Debtor Days"
				sign=""
				title=""
				value={debtorsDays}
			/>
			<CashFlowCard
				card={props.card}
				classNameTitle=""
				name="EBIT (% of Gross Margin)"
				sign="%"
				title=""
				value={ebitPercentOfGrossMargin}
			/>
			<CashFlowCard
				card={props.card}
				classNameTitle=""
				name={companyType === 'All Other' ? 'Stock Days' : 'WIP Days'}
				sign=""
				title=""
				value={stockDays}
			/>
			<CashFlowCard
				card={props.card}
				classNameTitle=""
				name="Net Profit (% of Revenue)"
				sign="%"
				title=""
				value={netProfitBeforeTax}
			/>
			<CashFlowCard
				card={props.card}
				classNameTitle=""
				name="Creditors Days"
				sign=""
				title=""
				value={creditorsDays}
			/>
		</div>
	);
};

export default CashFlowCards;