import type { FC } from "react";

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

import { LedgerEntryRow } from "@/entities/broker-operation";

import type { AccountPageRecentOperations } from "../../../model/previews";

type RecentOperationsProps = {
	operations: AccountPageRecentOperations;
};

const RecentOperations: FC<RecentOperationsProps> = (props) => {
	const { t } = useTranslation();
	const { operations } = props;

	return (
		<Stack gap="sm">
			{operations.state === "loading" && (
				<LoadingSkeleton label={t("ledger.recentLoading")}>
					{["first", "second", "third"].map(placeholder => <Skeleton height={48} key={placeholder} radius="sm" />)}
				</LoadingSkeleton>
			)}

			{operations.state === "error" && <Text c="dimmed">{t("states.unavailableTitle")}</Text>}

			{operations.state === "empty" && <Text c="dimmed">{t("ledger.recentEmpty")}</Text>}

			{operations.state === "partial" && <Text role="status">{t("investment.partial")}</Text>}

			{(operations.state === "loaded" || operations.state === "partial")
				&& operations.items.map(operation => (
					<LedgerEntryRow
						key={JSON.stringify([
							operation.account?.id,
							operation.id,
							operation.logoName,
						])}
						operation={operation}
					/>
				))}

			<Button component={Link} to={operations.to} variant="subtle">
				{t("ledger.open")}
			</Button>
		</Stack>
	);
};

export { RecentOperations };