import { Button, Group, Skeleton, Stack, Text, Title } from "@mantine/core";
import { LoadingSkeleton } from "@wealthledger/ui";
import type { CSSProperties, FC } from "react";
import { useTranslation } from "react-i18next";
import { formatMoney } from "@/shared/lib";
import type { BankSummary } from "../../api/queries";
import { BankOperationIcon } from "../BankOperationIcon/BankOperationIcon";
import classes from "./BankSummary.module.css";

type BankSummaryViewProps = {
	data?: BankSummary;
	loading: boolean;
	error: boolean;
	fetching: boolean;
	retry: () => void;
	all?: boolean;
};
const BankSummaryView: FC<BankSummaryViewProps> = (props) => {
	const { t } = useTranslation();
	return (
		<Stack gap="md" aria-busy={props.loading || props.fetching}>
			<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>
			{props.data ? (
				props.data.categories.length ? (
					<dl
						className={classes.categories}
						style={
							{
								"--category-rows": Math.ceil(props.data.categories.length / 2),
							} as CSSProperties
						}
					>
						{props.data.categories.map((category) => (
							<div className={classes.category} key={category.categoryId}>
								<dt className={classes.label}>
									<BankOperationIcon
										kind="expense"
										categoryName={category.categoryName}
									/>
									<span>{category.categoryName}</span>
								</dt>
								<dd className={classes.amount}>
									{formatMoney(category.net, { withZeroCents: true })}
								</dd>
							</div>
						))}
					</dl>
				) : (
					<Text size="sm" c="dimmed">
						{t("bank.noExpenses")}
					</Text>
				)
			) : props.loading ? (
				<LoadingSkeleton label={t("bank.loading")}>
					<Stack gap="sm">
						<Skeleton h={32} w="35%" />
						<Skeleton h={40} />
						<Skeleton h={40} />
					</Stack>
				</LoadingSkeleton>
			) : null}
			{props.error && (
				<Group role="alert">
					<Text>{t(props.data ? "bank.refreshError" : "bank.error")}</Text>
					<Button variant="default" onClick={props.retry}>
						{t("bank.retry")}
					</Button>
				</Group>
			)}
			{props.data && props.fetching && (
				<Text role="status">{t("bank.refreshing")}</Text>
			)}
		</Stack>
	);
};

export { BankSummaryView };