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

import type { FC } from "react";

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

import {
	brokerageOperationGroupKey,
	LedgerEntryRow,
	operationCategories,
	OperationGroup,
} from "@/entities/broker-operation";
import { groupItems } from "@/shared/lib";
import { SourceSyncStatus } from "@/shared/ui";

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

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

const AccountOperationsPageLoadedOperations: FC<
	AccountOperationsPageLoadedProps
> = (props) => {
	const { t } = useTranslation();

	const { items } = props;

	if (items.length > 0) {
		const entries = groupItems(
			items.map(operation => ({
				key: JSON.stringify([
					operation.account?.id,
					operation.id,
					operation.logoName,
				]),
				operation,
			})),
			entry => props.allAccounts
				? brokerageOperationGroupKey(entry.operation)
				: null,
		);

		return (
			<Stack
				component="ul"
				gap="lg"
				m={0}
				p={0}
				style={{ listStyle: "none" }}
			>
				{entries.map(entry => entry.type === "group"
					? (
							<OperationGroup
								entries={entry.items}
								key={entry.key}
								totalVisible={props.totalVisible}
							/>
						)
					: (
							<li key={entry.item.key}>
								<LedgerEntryRow operation={entry.item.operation} />
							</li>
						))}
			</Stack>
		);
	}

	if (props.partial) {
		return;
	}

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

const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
	props,
) => {
	const { t } = useTranslation();

	const categoryData = operationCategories.map(category => ({
		label: t(`ledger.category.${category}`),
		value: category,
	}));

	return (
		<Stack gap="lg">
			<Title order={1}>{t("ledger.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>}

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

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

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

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

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

			<AccountOperationsPageLoadedOperations {...props} />

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

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

export { AccountOperationsPageLoaded };