frontend/src/app/routes/DocumentTitle/DocumentTitle.tsx

import type { FC } from "react";

import { useDocumentTitle } from "@mantine/hooks";
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): undefined => {
	const { t } = useTranslation();
	useDocumentTitle(`${props.title} — ${t("appName")}`);
};

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"));
	let section = t("portfolio.title");
	switch (props.section ?? "") {
		case "income": {
			section = t("income.title");
			break;
		}
		case "operations": {
			section = t("ledger.title");
			break;
		}
		case "events": {
			section = t("events.title");
			break;
		}
		default: {
			break;
		}
	}
	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 ?? ""} />;
	if (cards) return <DocumentTitle title={t("navigation.cards")} />;
	if (bonds) return <DocumentTitle title={t("navigation.bonds")} />;
	if (stocks) return <DocumentTitle title={t("navigation.stocks")} />;
	return settings ? <DocumentTitle title={t("navigation.settings")} /> : <DocumentTitle title={t("navigation.accounts")} />;
};

export { ProtectedDocumentTitle };