import { Avatar, Paper, Stack, Text } from "@mantine/core";
import type { FC } from "react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { formatSnapshotTime, instrumentLogoUrl } from "@/shared/lib";
import type { BrokerageOperation } from "../api/useBrokerageOperations";
import { paymentPresentation } from "../model/display";
import classes from "./LedgerEntryRow.module.css";

type LedgerEntryRowProps = {
	operation: BrokerageOperation;
};

const LedgerEntryRow: FC<LedgerEntryRowProps> = (props) => {
	const { operation } = props;
	const { t } = useTranslation();
	const [imageFailed, setImageFailed] = useState(false);
	const instrument =
		operation.ticker ?? operation.instrumentType ?? t("ledger.noInstrument");
	const logoSrc = imageFailed ? null : instrumentLogoUrl(operation.logoName);
	const payment = paymentPresentation(operation);
	const metadata = [formatSnapshotTime(operation.occurredAt), instrument].join(
		" · ",
	);

	return (
		<Paper className={classes.row} withBorder>
			<Avatar
				alt=""
				aria-hidden="true"
				radius="md"
				size={40}
				src={logoSrc}
				onError={() => setImageFailed(true)}
			>
				{(instrument.trim()[0] ?? "?").toUpperCase()}
			</Avatar>
			<Stack className={classes.identity} gap={2}>
				<Text fw={700} lineClamp={1}>
					{operation.description || operation.type}
				</Text>
				<Text c="dimmed" size="sm">
					{metadata}
				</Text>
			</Stack>
			<Stack className={classes.amount} gap={2}>
				<Text className={classes[payment.tone]} fw={700}>
					{payment.amount}
				</Text>
				<Text className={classes[payment.tone]} size="sm">
					{t(payment.label)}
				</Text>
			</Stack>
		</Paper>
	);
};

export { LedgerEntryRow };