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 { BreadcrumbTrail } from "./BreadcrumbTrail";
import { EntityBreadcrumbs } from "./EntityBreadcrumbs";

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

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

	if (bond) {
		return <EntityBreadcrumbs identifier={bond.params.bondId ?? ""} kind="bond" />;
	}

	if (stock) {
		return (
			<EntityBreadcrumbs identifier={stock.params.stockId ?? ""} kind="stock" />
		);
	}

	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 <EntityBreadcrumbs identifier={card.params.cardId ?? ""} kind="card" />;
	}

	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 };