import type { FC, ReactNode } from "react";

import { AppShell as MantineAppShell, NavLink, Text } from "@mantine/core";
import {
	BondsIcon,
	CardsIcon,
	PortfolioIcon,
	SettingsIcon,
	StocksIcon,
} from "@wealthledger/icons";
import { useTranslation } from "react-i18next";
import { Outlet, NavLink as RouterNavLink, useLocation } from "react-router";

import classes from "./AppShell.module.css";

type AppShellProps = {
	contentAboveOutlet?: ReactNode;
};

const AppShell: FC<AppShellProps> = (props) => {
	const { contentAboveOutlet } = props;
	const { t } = useTranslation();
	const { pathname } = useLocation();

	const items = [
		{
			icon: <PortfolioIcon size={20} />,
			iconClassName: classes.portfolioIcon,
			label: t("navigation.accounts"),
			to: "/accounts",
		},
		{
			icon: <CardsIcon size={20} />,
			iconClassName: classes.cardsIcon,
			label: t("navigation.cards"),
			to: "/cards",
		},
		{
			icon: <StocksIcon size={20} />,
			iconClassName: classes.stocksIcon,
			label: t("navigation.stocks"),
			to: "/stocks",
		},
		{
			icon: <BondsIcon size={20} />,
			iconClassName: classes.bondsIcon,
			label: t("navigation.bonds"),
			to: "/bonds",
		},
		{
			icon: <SettingsIcon size={20} />,
			iconClassName: classes.settingsIcon,
			label: t("navigation.settings"),
			to: "/settings",
		},
	];

	return (
		<MantineAppShell
			header={{ height: 60 }}
			navbar={{ breakpoint: "sm", collapsed: { mobile: true }, width: 220 }}
			padding="md"
		>
			<MantineAppShell.Header className={classes.header}>
				<Text fw={700}>{t("appName")}</Text>
			</MantineAppShell.Header>

			<MantineAppShell.Navbar p="sm">
				{items.map(item => (
					<NavLink
						active={pathname.startsWith(item.to)}
						className={classes.navLink}
						component={RouterNavLink}
						key={item.to}
						label={item.label}
						leftSection={(
							<span
								className={`${classes.navIcon} ${item.iconClassName ?? ""}`}
							>
								{item.icon}
							</span>
						)}
						to={item.to}
					/>
				))}
			</MantineAppShell.Navbar>

			<MantineAppShell.Main className={classes.main}>
				<div className={classes.content}>
					{contentAboveOutlet}

					<Outlet />
				</div>
			</MantineAppShell.Main>

			<nav aria-label={t("appName")} className={classes.bottomNav}>
				{items.map((item) => {
					const appearanceClass = pathname.startsWith(item.to)
						? classes.active
						: undefined;

					return (
						<RouterNavLink
							className={appearanceClass}
							key={item.to}
							to={item.to}
						>
							{item.label}
						</RouterNavLink>
					);
				})}
			</nav>
		</MantineAppShell>
	);
};

export { AppShell };