import type { FC } from "react";

import { useTranslation } from "react-i18next";

import { useBankCard } from "@/entities/bank-card";
import { useBond } from "@/entities/bond";
import { useStock } from "@/entities/stock";

import type { Crumb } from "./BreadcrumbTrail";

import { BreadcrumbTrail } from "./BreadcrumbTrail";

type EntityBreadcrumbsProps = {
	identifier: string;
	kind:
		| "bond"
		| "card"
		| "stock";
};

const EntityBreadcrumbs: FC<EntityBreadcrumbsProps> = (props) => {
	const { identifier, kind } = props;
	const { t } = useTranslation();

	const bond = useBond(kind === "bond" ? identifier : "");
	const card = useBankCard(kind === "card" ? identifier : "");
	const stock = useStock(kind === "stock" ? identifier : "");

	let parent: Crumb;
	let name: string;

	if (kind === "bond") {
		parent = { label: t("bond.searchTitle"), to: "/bonds" };
		name = bond.data?.name ?? t("bond.instrument");
	}
	else if (kind === "stock") {
		parent = { label: t("stock.searchTitle"), to: "/stocks" };
		name = stock.data?.name ?? t("stock.share");
	}
	else {
		parent = { label: t("bank.title"), to: "/cards" };
		name = card.data?.name ?? t("bank.card");
	}

	return <BreadcrumbTrail items={[parent, { label: name }]} />;
};

export { EntityBreadcrumbs };