frontend/src/entities/brokerage-event/ui/BrokerageEventsPreview/BrokerageEventsPreview.tsx

import type { FC } from "react";

import { Alert, Button, Skeleton, Stack, Text } from "@mantine/core";
import { LoadingSkeleton } from "@wealthledger/ui";
import { useTranslation } from "react-i18next";
import { Link } from "react-router";

import { formatSnapshotTime } from "@/shared/lib";

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

import { BrokerageEventCard } from "../BrokerageEventCard";

type BrokerageEventsPreviewProps = {
	events: BrokerageEventsPreviewState;
};

type BrokerageEventsPreviewState
	= | {
		items: BrokerageEvent[];
		lastSuccessfulAt?: null | string;
		refreshError?: boolean;
		stale?: boolean;
		state: "loaded" | "partial";
		to: string;
	}
	| { state: "empty" | "error" | "loading"; to: string };

const BrokerageEventsPreview: FC<BrokerageEventsPreviewProps> = (props) => {
	const { events } = props;
	const { t } = useTranslation();

	return (
		<Stack gap="sm">
			{(events.state === "loaded") && ((
				<>
					{!!(events.lastSuccessfulAt) && ((
						<Text c="dimmed" size="xs">
							{t("investment.sourceTime", {
								date: formatSnapshotTime(events.lastSuccessfulAt),
							})}
						</Text>
					))}
					{!!(events.stale) && (<Text size="xs">{t("investment.stale")}</Text>)}
					{!!(events.refreshError) && ((
						<Text role="status">{t("accounts.refreshError")}</Text>
					))}
				</>
			))}
			{(events.state === "loading") && ((
				<LoadingSkeleton label={t("events.recentLoading")}>
					{["first", "second", "third"].map(placeholder => (
						<Skeleton height={48} key={placeholder} radius="sm" />
					))}
				</LoadingSkeleton>
			))}
			{(events.state === "error") && ((
				<Alert color="red">{t("events.recentError")}</Alert>
			))}
			{(events.state === "empty") && ((
				<Text c="dimmed">{t("events.recentEmpty")}</Text>
			))}
			{(events.state === "partial") && ((
				<Text role="status">{t("investment.partial")}</Text>
			))}
			{(events.state === "loaded" || events.state === "partial") && (events.items.map(event => (
				<BrokerageEventCard
					event={event}
					key={JSON.stringify([
						event.account?.id,
						event.type,
						event.date,
						event.instrumentUid,
						event.figi,
						event.ticker,
						event.logoName,
					])}
				/>
			)))}
			<Button component={Link} to={events.to} variant="subtle">
				{t("events.open")}
			</Button>
		</Stack>
	);
};

export { BrokerageEventsPreview, type BrokerageEventsPreviewState };