/* eslint-disable react/button-has-type */
/* eslint-disable react/destructuring-assignment */
import type React from 'react';
import { Link, useNavigate } from 'react-router-dom';

import BackToFileSVG from '../../../../Components/UI/Icons/BackToFileSVG';

interface Footer {
	container: string;
	svgClassName: string;
	linkText: string;
	buttonHelpText: string;
	buttonText: string;
	buttonClassName: string;
	classNameBtnHelperText: string;
	linkTo: string;
	backTo: string;
}

const CashFlowFooter: React.FC<Footer> = (props: Footer) => {
	const { pathname } = window.location;
	const navigate = useNavigate();
	function clickHandler(): void {
		window.scrollTo(0, 0);
		if (pathname === 'cash-flow-picture') {
			navigate('/cashFlowPerspective');
		} else if (pathname === 'cashFlowPerspective') {
			navigate('/working-capital-metric');
		} else if (pathname === 'working-capital-metric') {
			navigate('/financial-returns');
		} else if (pathname === 'financial-returns') {
			navigate('/cash-funding-meters');
		} else if (pathname === 'cash-funding-meters') {
			navigate('/dashboard');
		}
	}
	return (
		<div className={props.container}>
			<Link to={props.backTo}>
				<BackToFileSVG className={props.svgClassName} />
				<small>{props.linkText}</small>
			</Link>
			<p className={props.classNameBtnHelperText}>{props.buttonHelpText}</p>
			<Link to={props.linkTo}>
				<button className={props.buttonClassName} onClick={clickHandler}>
					{props.buttonText}
				</button>
			</Link>
		</div>
	);
};

export default CashFlowFooter;