import type { FC } from "react";

import { Stack } from "@mantine/core";
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({
		end: true,
		path: "/accounts/:accountId/operations",
	});
	const events = useMatch({ end: true, path: "/accounts/:accountId/events" });
	const income = useMatch({ end: true, path: "/accounts/:accountId/income" });
	const account = useMatch({ end: true, path: "/accounts/:accountId" });
	const card = useMatch("/cards/:cardId");
	const cards = useMatch("/cards");
	const accounts = useMatch({ end: true, path: "/accounts" });
	const settings = useMatch({ end: true, path: "/settings" });

	const stock = useMatch({ end: true, path: "/stocks/:stockId" });
	const bond = useMatch({ end: true, path: "/bonds/:bondId" });
	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") }]} />;
	return settings ? <BreadcrumbTrail items={[{ label: t("breadcrumbs.settings") }]} /> : undefined;
};

export { AppBreadcrumbs };