import type { FC } from "react";

import { Stack } from "@mantine/core";
import { useTranslation } from "react-i18next";

import { useCurrentRoute } from "@/app/model";

import { AccountBreadcrumbs } from "./AccountBreadcrumbs";
import { AccountScopeSwitch } from "./AccountScopeSwitch/AccountScopeSwitch";
import { BondBreadcrumbs } from "./BondBreadcrumbs";
import { BreadcrumbTrail } from "./BreadcrumbTrail";
import { CardBreadcrumbs } from "./CardBreadcrumbs";
import { StockBreadcrumbs } from "./StockBreadcrumbs";

const AppBreadcrumbs: FC = () => {
	const { t } = useTranslation();

	const {
		account,
		accounts,
		bond,
		card,
		cards,
		section,
		settings,
		stock,
	} = useCurrentRoute();

	if (bond) return <BondBreadcrumbs identifier={bond.params.bondId ?? ""} />;
	if (stock)
		return <StockBreadcrumbs identifier={stock.params.stockId ?? ""} />;
	if (account && (section || !account.params.section))
		return (
			<Stack gap={0} mb="md">
				<AccountBreadcrumbs
					accountId={account.params.accountId ?? ""}
					section={section}
				/>

				<AccountScopeSwitch
					accountId={account.params.accountId ?? ""}
					section={section}
				/>
			</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") }]} />;

	return settings
		? <BreadcrumbTrail items={[{ label: t("breadcrumbs.settings") }]} />
		: undefined;
};

export { AppBreadcrumbs };