import type React from 'react';
import { NavLink } from 'react-router-dom';

import {
	BillingSvg,
	CompanySettingsSvg,
	PersonalPreferencesSvg
} from '../../../Components/Layout/Header/Components/UI/HeaderButtonsSvg';
import environment from '../../../Environments/environment';
import { branding, gdpr, personalAccount } from '../../../Router/RouterComponentHelper';
import styles from './AccountNavBar.module.scss';
import { useUiContext } from '../../../Store/UiContext/UiContext';
import { hasAdminPermission } from '../../../utils/getUserPermissions';
import { useSelector } from 'react-redux';
import type { RootState } from '../../../ReduxState/store';
import type { CompanyDbModel } from '../../Companies/Components/CompaniesComponents.helper';

const AccountNavBar: React.FC = (): JSX.Element => {
	const {
		personalAccount,
		companySettings,
		manageUser,
		billingSettings,
		manageSubscription,
		billingDetails
	} = environment.frontendRoutes;

	const { toastNotification } = useUiContext();
	const selectedCompany = useSelector(
		(state: RootState): CompanyDbModel | null => state.companies.selectedCompany
	);

	const checkPermission = (e?: React.MouseEvent<HTMLAnchorElement>): boolean => {
		if (!hasAdminPermission(selectedCompany)) {
			if (e) e.preventDefault();
			toastNotification('info', 'You do not have permission to modify company settings');
			return false;
		}
		return true;
	};

	return (
		<nav>
			<ul>
				<p className={styles.item}>
					<small>
						<PersonalPreferencesSvg />
					</small>
					Personal Settings
				</p>
				<li>
					<NavLink
						className={({ isActive }) => (isActive ? styles.active : styles.item)}
						to={personalAccount}
					>
						General Information{' '}
					</NavLink>
				</li>
			</ul>
			<ul>
				<p className={styles.item}>
					<small>
						<CompanySettingsSvg />
					</small>
					Company Settings
				</p>
				<li>
					<NavLink
						className={({ isActive }) => (isActive ? styles.active : styles.item)}
						to={companySettings}
						onClick={(e) => checkPermission(e)}
					>
						My Companies{' '}
					</NavLink>
				</li>
				<li>
					<NavLink
						className={({ isActive }) => (isActive ? styles.active : styles.item)}
						to={manageUser}
						onClick={(e) => checkPermission(e)}
					>
						Manage Users{' '}
					</NavLink>
				</li>
				<li>
					<NavLink
						className={({ isActive }) => (isActive ? styles.active : styles.item)}
						to={branding}
						onClick={(e) => checkPermission(e)}
					>
						Logo & Colour{' '}
					</NavLink>
				</li>
				{/* <li>
					<NavLink className={({ isActive }) => (isActive ? styles.active : styles.item)} to={gdpr}>
						GDPR Compliance{' '}
					</NavLink>
				</li> */}
			</ul>
			<ul>
				<p className={styles.item}>
					<small>
						<BillingSvg />
					</small>
					Billing
				</p>
				<li>
					<NavLink
						className={({ isActive }) => (isActive ? styles.active : styles.item)}
						to={billingSettings}
						onClick={(e) => checkPermission(e)}
					>
						Current Plan{' '}
					</NavLink>
				</li>
				<li>
					<NavLink
						className={({ isActive }) => (isActive ? styles.active : styles.item)}
						to={manageSubscription}
						onClick={(e) => checkPermission(e)}
					>
						Manage Subscriptions{' '}
					</NavLink>
				</li>
				<li>
					<NavLink
						className={({ isActive }) => (isActive ? styles.active : styles.item)}
						to={billingDetails}
						onClick={(e) => checkPermission(e)}
					>
						Billing History{' '}
					</NavLink>
				</li>
			</ul>
		</nav>
	);
};

export default AccountNavBar;