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

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 accounts = useMatch({ path: "/accounts", end: true });
	const settings = useMatch({ path: "/settings", end: true });

	if (operations)
		return (
			<Stack gap="sm" mb="lg">
				<AccountBreadcrumbs
					accountId={operations.params.accountId ?? ""}
					section="operations"
				/>
				<AccountScopeSwitch
					accountId={operations.params.accountId ?? ""}
					section="operations"
				/>
			</Stack>
		);
	if (events)
		return (
			<Stack gap="sm" mb="lg">
				<AccountBreadcrumbs
					accountId={events.params.accountId ?? ""}
					section="events"
				/>
				<AccountScopeSwitch
					accountId={events.params.accountId ?? ""}
					section="events"
				/>
			</Stack>
		);
	if (income)
		return (
			<Stack gap="sm" mb="lg">
				<AccountBreadcrumbs
					accountId={income.params.accountId ?? ""}
					section="income"
				/>
				<AccountScopeSwitch
					accountId={income.params.accountId ?? ""}
					section="income"
				/>
			</Stack>
		);
	if (account)
		return (
			<Stack gap="sm" mb="lg">
				<AccountBreadcrumbs accountId={account.params.accountId ?? ""} />
				<AccountScopeSwitch accountId={account.params.accountId ?? ""} />
			</Stack>
		);
	if (accounts)
		return <BreadcrumbTrail items={[{ label: t("breadcrumbs.accounts") }]} />;
	if (settings)
		return <BreadcrumbTrail items={[{ label: t("breadcrumbs.settings") }]} />;
	return null;
};

export { AppBreadcrumbs };