import type { FC } from "react";

import { Stack, Title } from "@mantine/core";
import { useTranslation } from "react-i18next";

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

import type { IncomeDisplayModel } from "../../../model/display";

import classes from "../AccountIncomePage.module.css";

type IncomePaymentsProps = {
	allAccounts?: boolean;
	entries: IncomeDisplayModel["entries"];
	totalVisible?: boolean;
};

const IncomePayments: FC<IncomePaymentsProps> = (props) => {
	const { t } = useTranslation();

	return (
		<Stack aria-label={t("income.payments")} component="section">
			<Title order={2}>{t("income.payments")}</Title>

			<Stack className={classes.entries} component="ul" gap="sm">
				{groupItems(
					props.entries,
					entry => props.allAccounts
						? brokerageOperationGroupKey(entry.operation)
						: null,
				).map(entry => entry.type === "group"
					? (
							<OperationGroup
								entries={entry.items}
								key={entry.key}
								totalVisible={props.totalVisible === true}
							/>
						)
					: (
							<li key={entry.item.key}>
								<LedgerEntryRow operation={entry.item.operation} wrap />
							</li>
						))}
			</Stack>
		</Stack>
	);
};

export { IncomePayments };