frontend/src/app/ui/AppBreadcrumbs.tsx

import { Stack } from "@mantine/core";
import type { FC } from "react";
import { useTranslation } from "react-i18next";
import { useMatch } from "react-router";
import { AccountBreadcrumbs } from "./AccountBreadcrumbs";
import { AccountScopeSwitch } from "./AccountScopeSwitch";
import { BondBreadcrumbs } from "./BondBreadcrumbs";
import { BreadcrumbTrail } from "./BreadcrumbTrail";
import { CardBreadcrumbs } from "./CardBreadcrumbs";
import { StockBreadcrumbs } from "./StockBreadcrumbs";

const AppBreadcrumbs: FC = () => {
	const { t } = useTranslation();
	const operations = useMatch({
		path: "/accounts/:accountId/operations",
		end: true,
	});
	const events = useMatch({ path: "/accounts/:accountId/events", end: true });
	const income = useMatch({ path: "/accounts/:accountId/income", end: true });
	const account = useMatch({ path: "/accounts/:accountId", end: true });
	const card = useMatch("/cards/:cardId");
	const cards = useMatch("/cards");
	const accounts = useMatch({ path: "/accounts", end: true });
	const settings = useMatch({ path: "/settings", end: true });

	const stock = useMatch({ path: "/stocks/:stockId", end: true });
	const bond = useMatch({ path: "/bonds/:bondId", end: true });
	if (bond) return <BondBreadcrumbs identifier={bond.params.bondId ?? ""} />;
	if (stock)
		return <StockBreadcrumbs identifier={stock.params.stockId ?? ""} />;
	if (operations)
		return (
			<Stack gap={0} mb="md">
				<AccountBreadcrumbs
					accountId={operations.params.accountId ?? ""}
					section="operations"
				/>
				<AccountScopeSwitch
					accountId={operations.params.accountId ?? ""}
					section="operations"
				/>
			</Stack>
		);
	if (events)
		return (
			<Stack gap={0} mb="md">
				<AccountBreadcrumbs
					accountId={events.params.accountId ?? ""}
					section="events"
				/>
				<AccountScopeSwitch
					accountId={events.params.accountId ?? ""}
					section="events"
				/>
			</Stack>
		);
	if (income)
		return (
			<Stack gap={0} mb="md">
				<AccountBreadcrumbs
					accountId={income.params.accountId ?? ""}
					section="income"
				/>
				<AccountScopeSwitch
					accountId={income.params.accountId ?? ""}
					section="income"
				/>
			</Stack>
		);
	if (account)
		return (
			<Stack gap={0} mb="md">
				<AccountBreadcrumbs accountId={account.params.accountId ?? ""} />
				<AccountScopeSwitch accountId={account.params.accountId ?? ""} />
			</Stack>
		);
	if (card) return <CardBreadcrumbs identifier={card.params.cardId ?? ""} />;
	if (cards) return <BreadcrumbTrail items={[{ label: t("bank.title") }]} />;
	if (accounts)
		return <BreadcrumbTrail items={[{ label: t("breadcrumbs.accounts") }]} />;
	if (settings)
		return <BreadcrumbTrail items={[{ label: t("breadcrumbs.settings") }]} />;
	return null;
};

export { AppBreadcrumbs };