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 type { BrokerageEvent } from "../../api/useBrokerageEvents";

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

type BrokerageEventsPreviewProps = {
	events: BrokerageEventsPreviewState;
};

type BrokerageEventsPreviewState
	= | {
		items: BrokerageEvent[];
		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 === "loading" && (
				<LoadingSkeleton label={t("events.recentLoading")}>
					{["first", "second", "third"].map(placeholder => <Skeleton height={48} key={placeholder} radius="sm" />)}
				</LoadingSkeleton>
			)}

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

			{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={brokerageEventKey(event)}
					/>
				))}

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

export { BrokerageEventsPreview, type BrokerageEventsPreviewState };