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 { groupItems } from "@/shared/lib";

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

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

type BrokerageEventsPreviewProps = {
	allAccounts?: boolean;
	events: BrokerageEventsPreviewState;
	moreLabel?: string;
};

type BrokerageEventsPreviewState
	= | {
		items: BrokerageEvent[];
		state: "loaded" | "partial";
		to: string;
		totalVisible?: boolean;
	}
	| { 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") && (
				<Stack
					component="ul"
					gap="sm"
					m={0}
					p={0}
					style={{ listStyle: "none" }}
				>
					{groupItems(
						events.items,
						props.allAccounts ? brokerageEventGroupKey : () => null,
					).map(entry => entry.type === "group"
						? (
								<BrokerageEventGroup
									events={entry.items}
									key={entry.key}
									totalVisible={events.totalVisible === true}
								/>
							)
						: (
								<li key={brokerageEventKey(entry.item)}>
									<BrokerageEventCard event={entry.item} />
								</li>
							))}
				</Stack>
			)}

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

export { BrokerageEventsPreview, type BrokerageEventsPreviewState };