import type { FC } from "react";

import { Anchor, Group, Text } from "@mantine/core";
import { EntryCard } from "@wealthledger/ui";
import { useTranslation } from "react-i18next";
import { Link } from "react-router";

import {
	formatDecimal,
	formatMoney,
	formatSnapshotTime,
	instrumentLogoUrl,
} from "@/shared/lib";

import type { BrokerageOperation } from "../api/useBrokerageOperations";

import { operationLabelKey, paymentPresentation } from "../model/display";

type LedgerEntryRowProps = {
	operation: BrokerageOperation;
	withDetails?: boolean;
	wrap?: boolean;
};

const LedgerEntryRow: FC<LedgerEntryRowProps> = (props) => {
	const { operation } = props;
	const { t } = useTranslation();

	const instrument
		= operation.ticker ?? operation.instrumentType ?? t("ledger.noInstrument");

	const payment = paymentPresentation(operation);

	const metadata = [
		t("ledger.occurredAt", { date: formatSnapshotTime(operation.occurredAt) }),
		instrument,
		props.withDetails
			? null
			: operation.account?.name,
	]
		.filter(Boolean)
		.join(" · ");

	let details;
	if (props.withDetails) {
		details = (
			<>
				<Group gap="sm">
					{operation.quantity != undefined && (
						<Text c="dimmed" size="xs">
							{t("ledger.quantity", {
								value: formatDecimal(operation.quantity),
							})}
						</Text>
					)}

					{!!operation.price && (
						<Text c="dimmed" size="xs">
							{t("ledger.price", { value: formatMoney(operation.price) })}
						</Text>
					)}
				</Group>

				{!!operation.account && (
					<Anchor
						component={Link}
						size="sm"
						to={`/accounts/${encodeURIComponent(operation.account.id)}`}
					>
						{operation.account.name}
					</Anchor>
				)}
			</>
		);
	}
	else details = undefined;

	return (
		<EntryCard
			details={details}
			imageSrc={instrumentLogoUrl(operation.logoName)}
			initial={(instrument.trim()[0] ?? "?").toUpperCase()}
			metadata={metadata}
			title={operation.description || t(operationLabelKey(operation.type))}
			tone={payment.tone}
			value={payment.amount}
			valueLabel={t(payment.label)}
			wrap={props.wrap}
		/>
	);
};

export { LedgerEntryRow };