import type { FC } from "react";

import {
	Alert,
	Button,
	Group,
	Stack,
	Text,
	Title,
} from "@mantine/core";
import { DatePickerInput } from "@mantine/dates";
import { useTranslation } from "react-i18next";

import {
	BrokerageEventCard,
	brokerageEventKey,
} from "@/entities/brokerage-event";
import { SourceSyncStatus } from "@/shared/ui";

import type { AccountEventsPageViewModel } from "../AccountEventsPage.vm";

import { AccountEventsPageEmpty } from "./AccountEventsPageEmpty.view";

type AccountEventsPageLoadedProps = Extract<
	AccountEventsPageViewModel,
	{ state: "loaded" }
>;

const AccountEventsPageLoadedEvents: FC<AccountEventsPageLoadedProps> = (
	props,
) => {
	if (props.events.length > 0) {
		return (
			<Stack gap="sm">
				{props.events.map(event => (
					<BrokerageEventCard
						event={event}
						key={brokerageEventKey(event)}
					/>
				))}
			</Stack>
		);
	}

	if (props.partial) {
		return;
	}

	return <AccountEventsPageEmpty />;
};

const AccountEventsPageLoaded: FC<AccountEventsPageLoadedProps> = (props) => {
	const { t } = useTranslation();

	return (
		<Stack gap="lg">
			<Title order={1}>{t("events.title")}</Title>

			<SourceSyncStatus
				lastAttempt={props.source?.lastAttempt}
				lastSuccessfulAt={props.source?.lastSuccessfulAt}
				stale={props.source?.freshness === "stale"}
			/>

			{!!props.partial && <Alert role="status">{t("investment.partial")}</Alert>}

			<Text c="dimmed">{t("events.hint")}</Text>

			<Group align="end">
				<DatePickerInput
					allowSingleDateInRange
					clearable
					clearButtonProps={{ "aria-label": t("ledger.clearPeriod") }}
					label={t("ledger.period")}
					minDate={props.minDate}
					onChange={props.onPeriodChange}
					popoverProps={{
						middlewares: { shift: { crossAxis: true } },
						onOpen: props.onPeriodPopoverOpen,
						returnFocus: true,
					}}
					type="range"
					value={props.draftPeriod}
					valueFormat="DD.MM.YYYY"
				/>
			</Group>

			<Group>
				<Button disabled={!props.canApply} onClick={props.onApply}>
					{t("ledger.apply")}
				</Button>

				<Button onClick={props.onReset} variant="default">
					{t("ledger.reset")}
				</Button>
			</Group>

			<AccountEventsPageLoadedEvents {...props} />
		</Stack>
	);
};

export { AccountEventsPageLoaded };