import classNames from 'classnames';
import { useState } from 'react';
import { Outlet, useLocation } from 'react-router-dom';

import FooterLogo from './FooterLogo';
import styles from './LayoutComponent.module.scss';
import NavBar from './Side/NavBar';

const LayoutComponent = (): JSX.Element => {
	const location = useLocation();
	const [navbarIsOpen, setNavbarIsOpen] = useState<boolean>(true);
	const routesWithoutNavbar: string[] = [
		'/signin',
		'/signup',
		'/joinoraddcompany',
		'/chooseCompanyType',
		'/passwordAndLogin',
		'/manageSubscriptions',
		'/generate-pdf-for-mfc'
		// '/billingDetails'
	];
	const currentRouteHasNavbar = !routesWithoutNavbar.includes(location.pathname);

	const handleIsOpenChanged = () => {
		setNavbarIsOpen(!navbarIsOpen);
	};

	return (
		<div
			className={currentRouteHasNavbar ? (navbarIsOpen ? styles.expanded : styles.collapsed) : ''}
		>
			{currentRouteHasNavbar && (
				<NavBar isOpen={navbarIsOpen} isOpenChanged={handleIsOpenChanged} />
			)}
			<div className={classNames(styles.contentWrapper, styles.contentWrapperMinHeight)}>
				<Outlet />
			</div>
			<div
				className={classNames(styles.contentWrapper, {
					[styles.footer]: true
				})}
			>
				<div>
					<a href="https://www.moneyxplier.com/privacy-policy" target="_blank" rel="noreferrer">
						Privacy Policy
					</a>{' '}
					-{' '}
					<a href="https://www.moneyxplier.com/terms-of-use" target="_blank" rel="noreferrer">
						Terms of service
					</a>{' '}
					{/* - &copy; 2022 - {new Date().getFullYear()} MoneyXplier® */}- &copy; 2018 -{' '}
					{new Date().getFullYear()} BM Interim Management Ltd - All rights reserved
				</div>
				<div>
					<FooterLogo logoClass={styles.logo} />
				</div>
			</div>
		</div>
	);
};

export default LayoutComponent;