frontend/src/pages/account-operations/ui/AccountOperationsPage/components/AccountOperationsPageLoaded.view.tsx

import type { FC } from "react";

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

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

import type { AccountOperationsPageViewModel } from "../AccountOperationsPage.vm";

import { useAccountOperationsPageLoadedVm } from "./AccountOperationsPageLoaded.vm";

type AccountOperationsPageLoadedProps = Extract<
	AccountOperationsPageViewModel,
	{ state: "loaded" }
>;

const AccountOperationsPageLoadedOperations: FC<
	AccountOperationsPageLoadedProps
> = (props) => { // eslint-disable-line sonarjs/function-return-type -- React renders elements and lists.
	const { t } = useTranslation();

	const { items } = props;

	if (items.length > 0) {
		return items.map(operation => (
			<LedgerEntryRow
				key={JSON.stringify([
					operation.account?.id,
					operation.id,
					operation.logoName,
				])}
				operation={operation}
			/>
		));
	}

	if (props.partial) {
		return;
	}

	return <StateView text={t("ledger.emptyText")} title={t("ledger.emptyTitle")} />;
};

const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
	props,
) => {
	const {
		canApply,
		categoryData,
		draftCategories,
		draftFrom,
		draftTo,
		hasNext,
		hasPrevious,
		onApply,
		onCategoriesChange,
		onNext,
		onPeriodChange,
		onPrevious,
		onReset,
		t,
	} = useAccountOperationsPageLoadedVm(props);

	return (
		<Stack gap="lg">
			{!!props.lastSuccessfulAt && (
				<Text c="dimmed" size="xs">
					{t("investment.sourceTime", {
						date: formatSnapshotTime(props.lastSuccessfulAt),
					})}
				</Text>
			)}

			<Title order={1}>{t("ledger.title")}</Title>

			<Button disabled={props.refreshing} onClick={props.retry} w="fit-content">
				{t("investment.refresh")}
			</Button>

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

			{!!props.historyLoading && <Alert>{t("investment.history")}</Alert>}

			{!!props.refreshing && <Progress animated aria-label={t("accounts.refreshing")} value={100} />}

			{!!props.refreshError && (
				<Alert aria-live="polite" color="yellow" role="status">
					{t(
						props.sourceError
							? "investment.syncFailed"
							: "accounts.refreshError",
					)}

					<Button onClick={props.retry} variant="subtle">
						{t("accounts.retry")}
					</Button>
				</Alert>
			)}

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

			<MultiSelect
				clearable
				clearButtonProps={{ "aria-label": t("ledger.clearPeriod") }}
				data={categoryData}
				label={t("ledger.categories")}
				onChange={onCategoriesChange}
				placeholder={t("ledger.categoriesPlaceholder")}
				value={draftCategories}
			/>

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

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

			<AccountOperationsPageLoadedOperations {...props} />

			{!!(hasNext || hasPrevious) && (
				<Group justify="space-between">
					<Button disabled={!hasPrevious} onClick={onPrevious}>
						{t("ledger.previous")}
					</Button>

					<Button disabled={!hasNext} onClick={onNext}>
						{t("ledger.next")}
					</Button>
				</Group>
			)}
		</Stack>
	);
};

export { AccountOperationsPageLoaded };