import type { FC } from "react";

import { EntryCard } from "@wealthledger/ui";
import { useTranslation } from "react-i18next";

import { formatDate, formatMoney, instrumentLogoUrl } from "@/shared/lib";
import { PayoutCard } from "@/shared/ui";

import type { BrokerageEvent } from "../api/useBrokerageEvents";

type BrokerageEventCardProps = { event: BrokerageEvent };

const BrokerageEventCard: FC<BrokerageEventCardProps> = (props) => {
	const { event } = props;
	const { t } = useTranslation();

	const date = formatDate(event.date);

	if (event.type === "coupon" || event.type === "dividend") {
		const title = [t(`events.type.${event.type}`), event.displayName].join(" · ");

		const extraMetadata = [event.isin, event.account?.name]
			.filter(Boolean)
			.join(" · ");

		return (
			<PayoutCard
				date={date}
				dateKind={event.dateKind}
				extraMetadata={extraMetadata}
				imageSrc={instrumentLogoUrl(event.logoName)}
				initial={(event.ticker.trim()[0] ?? "?").toUpperCase()}
				kind="forecast"
				projectedAmount={event.projectedAmount}
				title={title}
			/>
		);
	}

	const metadata = [
		date,
		event.dateKind === "registry"
			? t("events.dateKind.registry")
			: null,
		event.isin,
		event.account?.name,
	]
		.filter(Boolean)
		.join(" · ");

	const projectedAmount = event.projectedAmount
		? formatMoney(event.projectedAmount)
		: t("events.noAmount");

	return (
		<EntryCard
			imageSrc={instrumentLogoUrl(event.logoName)}
			initial={(
				event.ticker.trim()[0] ?? "?"
			).toUpperCase()}
			metadata={metadata}
			title={[t(`events.type.${event.type}`), event.displayName].join(" · ")}
			tone="neutral"
			value={projectedAmount}
			valueLabel={t("payout.forecast")}
		/>
	);
};

export { BrokerageEventCard };