frontend/src/entities/bank-card/ui/BankSummary/BankSummary.view.tsx

import type { CSSProperties, FC } from "react";

import { Skeleton, Stack, Text, Title } from "@mantine/core";
import { OperationIcon } from "@wealthledger/icons";
import { LoadingSkeleton } from "@wealthledger/ui";
import { useTranslation } from "react-i18next";

import { formatMoney } from "@/shared/lib";

import type { BankSummary } from "../../api/types";

import { bankOperationAppearance } from "../../model/operation-appearance";
import classes from "./BankSummary.module.css";

const CATEGORY_COLUMNS = 2;

type BankSummaryViewProps = {
	all?: boolean;
	data?: BankSummary;
	error: boolean;
	fetching: boolean;
	loading: boolean;
};

const BankSummaryViewCategories: FC<BankSummaryViewProps> = (props) => {
	const { t } = useTranslation();

	if (props.data) {
		if (props.data.categories.length > 0) {
			return (
				<dl
					className={classes.categories}
					style={
						{
							"--category-rows": Math.ceil(
								props.data.categories.length / CATEGORY_COLUMNS,
							),
						} as CSSProperties
					}
				>
					{props.data.categories.map(category => (
						<div className={classes.category} key={category.categoryId}>
							<dt className={classes.label}>
								<OperationIcon
									{...bankOperationAppearance("expense", category.categoryName)}
								/>

								<span>{category.categoryName}</span>
							</dt>

							<dd className={classes.amount}>
								{formatMoney(category.net, { withZeroCents: true })}
							</dd>
						</div>
					))}
				</dl>
			);
		}

		return (
			<Text c="dimmed" size="sm">
				{t("bank.noExpenses")}
			</Text>
		);
	}

	if (props.loading) {
		return (
			<LoadingSkeleton label={t("bank.loading")}>
				<Stack gap="sm">
					<Skeleton h={32} w="35%" />

					<Skeleton h={40} />

					<Skeleton h={40} />
				</Stack>
			</LoadingSkeleton>
		);
	}

	return null;
};

const BankSummaryView: FC<BankSummaryViewProps> = (props) => {
	const { t } = useTranslation();

	return (
		<Stack aria-busy={props.loading || props.fetching} gap="md">
			<div className={classes.header}>
				<Title order={2}>
					{t(props.all ? "bank.allSummary" : "bank.summary")}
				</Title>

				{props.data && (
					<Text className={classes.total}>
						{formatMoney(props.data.net, { withZeroCents: true })}
					</Text>
				)}
			</div>

			<BankSummaryViewCategories {...props} />

			{props.error && !props.data && <Text role="alert">{t("bank.error")}</Text>}
		</Stack>
	);
};

export { BankSummaryView };