import type { FC } from "react";

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

import {
	formatDate,
	formatMoney,
	instrumentLogoUrl,
	sumMoney,
	totalText,
} from "@/shared/lib";
import { AccountRow, EntryGroup, EntryGroupTotal } from "@/shared/ui";

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

import { brokerageEventKey } from "../model/event-key";

type BrokerageEventGroupProps = {
	events: [BrokerageEvent, BrokerageEvent, ...BrokerageEvent[]];
	totalVisible: boolean;
};

const BrokerageEventGroup: FC<BrokerageEventGroupProps> = (props) => {
	const { t } = useTranslation();
	const [first] = props.events;
	const typeLabel = t(`events.type.${first.type}`);

	const amounts = props.events.flatMap(event =>
		event.projectedAmount ? [event.projectedAmount] : [],
	);

	const totals = props.totalVisible && amounts.length === props.events.length
		? sumMoney(amounts)
		: null;

	const date = formatDate(first.date);

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

	const title = `${typeLabel} · ${first.displayName}`;
	const totalsText = totalText(totals, false);

	const accessibleName = [
		title,
		metadata,
		totalsText || t("entryGroup.totalUnavailable"),
	].join(", ");

	return (
		<EntryGroup
			header={(
				<EntryCard
					imageSrc={instrumentLogoUrl(first.logoName)}
					initial={(first.ticker.trim()[0] ?? "?").toUpperCase()}
					metadata={metadata}
					title={title}
					tone="neutral"
					value={<EntryGroupTotal totals={totals} />}
					valueLabel={t("payout.forecast")}
					wrap
				/>
			)}
			label={accessibleName}
		>
			{props.events.map((event) => {
				const value = event.projectedAmount
					? formatMoney(event.projectedAmount)
					: t("events.noAmount");

				return (
					<AccountRow
						accountName={event.account?.name ?? "—"}
						key={brokerageEventKey(event)}
						value={value}
						valueLabel={t("payout.forecast")}
					/>
				);
			})}
		</EntryGroup>
	);
};

export { BrokerageEventGroup };