import {
	ActionIcon,
	Anchor,
	Group,
	Skeleton,
	Stack,
	Text,
} from "@mantine/core";
import {
	DeleteIcon,
	EditIcon,
	OperationIcon,
} from "@wealthledger/icons";
import { EntryCard, LoadingSkeleton } from "@wealthledger/ui";
import { type FC } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router";

import {
	BankFeedback,
	bankOperationAppearance,
} from "@/entities/bank-card";

import type { CardPageVm } from "./CardPage.vm";

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

type CardHistoryProps = Pick<CardPageVm,
	"history"
	| "period"
	| "rows"
>;

// eslint-disable-next-line sonarjs/function-return-type -- React renders elements, lists and empty output.
const CardHistory: FC<CardHistoryProps> = (props) => {
	const vm = props;
	const { t } = useTranslation();

	if (vm.rows) {
		if (vm.rows.length > 0) {
			return vm.rows.map((row) => {
				const details = row.otherCard
					? (
							<Anchor
								component={Link}
								to={`/cards/${row.otherCard}?from=${vm.period.from}&to=${vm.period.to}`}
							>
								{t("bank.card")}
							</Anchor>
						)
					: undefined;

				return (
					<section
						aria-label={`${row.title} ${row.item.date}`}
						className={classes.operation}
						key={row.item.id}
					>
						<EntryCard
							actions={(
								<Group gap={4} wrap="nowrap">
									<ActionIcon
										aria-label={t("bank.edit")}
										disabled={!row.editable}
										onClick={row.onEdit}
										size="sm"
										title={t("bank.edit")}
										variant="subtle"
									>
										<EditIcon size={18} strokeWidth={1.5} />
									</ActionIcon>

									<ActionIcon
										aria-label={t("bank.delete")}
										color="red"
										disabled={!row.editable}
										onClick={row.onDelete}
										size="sm"
										title={t("bank.delete")}
										variant="subtle"
									>
										<DeleteIcon size={18} strokeWidth={1.5} />
									</ActionIcon>
								</Group>
							)}
							color={row.color}
							details={details}
							icon={(
								<OperationIcon
									{...bankOperationAppearance(
										row.item.kind,
										row.item.categoryName,
									)}
								/>
							)}
							initial={row.title.charAt(0)}
							metadata={row.metadata}
							title={row.title}
							tone={row.tone}
							value={row.value}
							valueLabel={t(`bank.kinds.${row.item.kind}`)}
							wrap
						/>
					</section>
				);
			});
		}

		return <Text>{t("bank.noOperations")}</Text>;
	}

	if (vm.history.error) {
		return (
			<BankFeedback
				cached={Boolean(vm.rows)}
				error={vm.history.error}
				loadingError={!vm.rows}
				retry={vm.history.refetch}
			/>
		);
	}

	if (vm.history.loading) {
		return (
			<LoadingSkeleton label={t("bank.loadingHistory")}>
				<Stack>
					<Skeleton h={90} />

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

	return null;
};

export { CardHistory };