frontend/src/app/routes/DocumentTitle.tsx

import { useDocumentTitle } from "@mantine/hooks";
import type { FC } from "react";
import { useTranslation } from "react-i18next";
import { useMatch } from "react-router";
import { useBankCard } from "@/entities/bank-card";
import { useBond } from "@/entities/bond";
import { useBrokerageAccounts } from "@/entities/brokerage-account";
import { useStock } from "@/entities/stock";

type DocumentTitleProps = { title: string };

const DocumentTitle: FC<DocumentTitleProps> = (props) => {
	const { t } = useTranslation();
	useDocumentTitle(`${props.title} — ${t("appName")}`);
	return null;
};

type AccountDocumentTitleProps = {
	accountId: string;
	section?: string;
};

const AccountDocumentTitle: FC<AccountDocumentTitleProps> = (props) => {
	const { t } = useTranslation();
	const { data } = useBrokerageAccounts();
	const accountName =
		props.accountId === "all"
			? t("accounts.all")
			: (data?.find((account) => account.id === props.accountId)?.name ??
				t("account.title"));
	const section =
		props.section === "income"
			? t("income.title")
			: props.section === "operations"
				? t("ledger.title")
				: props.section === "events"
					? t("events.title")
					: t("portfolio.title");
	return <DocumentTitle title={`${section} — ${accountName}`} />;
};

type InstrumentDocumentTitleProps = { identifier: string };

const BondDocumentTitle: FC<InstrumentDocumentTitleProps> = (props) => {
	const { t } = useTranslation();
	const { data } = useBond(props.identifier);
	return <DocumentTitle title={data?.name ?? t("bond.instrument")} />;
};

const StockDocumentTitle: FC<InstrumentDocumentTitleProps> = (props) => {
	const { t } = useTranslation();
	const { data } = useStock(props.identifier);
	return <DocumentTitle title={data?.name ?? t("stock.share")} />;
};

const CardDocumentTitle: FC<InstrumentDocumentTitleProps> = (props) => {
	const { t } = useTranslation();
	const { data } = useBankCard(props.identifier);
	return <DocumentTitle title={data?.name ?? t("bank.card")} />;
};

const ProtectedDocumentTitle: FC = () => {
	const { t } = useTranslation();
	const account = useMatch("/accounts/:accountId/:section?");
	const bond = useMatch("/bonds/:bondId");
	const stock = useMatch("/stocks/:stockId");
	const card = useMatch("/cards/:cardId");
	const cards = useMatch("/cards");
	const bonds = useMatch("/bonds");
	const stocks = useMatch("/stocks");
	const settings = useMatch("/settings");
	if (card) return <CardDocumentTitle identifier={card.params.cardId ?? ""} />;
	if (account)
		return (
			<AccountDocumentTitle
				accountId={account.params.accountId ?? ""}
				section={account.params.section}
			/>
		);
	if (bond) return <BondDocumentTitle identifier={bond.params.bondId ?? ""} />;
	if (stock)
		return <StockDocumentTitle identifier={stock.params.stockId ?? ""} />;
	return (
		<DocumentTitle
			title={t(
				cards
					? "navigation.cards"
					: bonds
						? "navigation.bonds"
						: stocks
							? "navigation.stocks"
							: settings
								? "navigation.settings"
								: "navigation.accounts",
			)}
		/>
	);
};

export { ProtectedDocumentTitle };