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

import type { GlobalStateModel } from '../../Store/global/GlobalState-context';
import { GlobalStateContext } from '../../Store/global/GlobalState-context';
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<string>('');
	const routesWithoutNavbar: string[] = [
		'/signin',
		'/signup',
		'/joinoraddcompany',
		'/chooseCompanyType',
		'/passwordAndLogin',
		'/manageSubscriptions',
		'/generate-pdf-for-mfc'
		// '/billingDetails'
	];
	const currentRouteHasNavbar = !routesWithoutNavbar.includes(location.pathname);

	const globalContext: GlobalStateModel = useContext(GlobalStateContext);
	const deferredIsNavbarClosed = globalContext.isNavbarOpen;

	const handleIsOpenChanged = (isOpen: boolean) => {
		setNavbarIsOpen(isOpen ? 'open' : 'closed');
	};

	return (
		<div className={currentRouteHasNavbar ? navbarIsOpen : ''}>
			{currentRouteHasNavbar && <NavBar isOpenChanged={handleIsOpenChanged} />}
			<div
				className={classNames(styles.contentWrapper, styles.contentWrapperMinHeight, {
					[styles.narrow]: deferredIsNavbarClosed,
					[styles.wide]: !deferredIsNavbarClosed
				})}
			>
				<Outlet />
			</div>
			<div
				className={classNames(styles.contentWrapper, {
					[styles.narrow]: deferredIsNavbarClosed,
					[styles.wide]: !deferredIsNavbarClosed,
					[styles.footer]: true
				})}
			>
				<div>
					<a
						href="https://www.bmim-cash-flow.co.uk/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;