frontend/src/pages/card/ui/DeleteOperation/DeleteOperation.tsx

import { Button, Group, Modal, Stack, Text } from "@mantine/core";
import { type FC, useState } from "react";
import { useTranslation } from "react-i18next";
import {
	BankFeedback,
	type BankOperation,
	useBankFormFocus,
	useBankMutations,
	useBankOperation,
} from "@/entities/bank-card";
import { formatDate, formatMoney } from "@/shared/lib";

type DeleteOperationProps = { operation: BankOperation; onClose: () => void };
const DeleteOperation: FC<DeleteOperationProps> = (props) => {
	useBankFormFocus();
	const [opened, setOpened] = useState(true);
	const { t } = useTranslation();
	const [record, setRecord] = useState(props.operation);
	const [latest, setLatest] = useState<BankOperation>();
	const [error, setError] = useState<unknown>();
	const query = useBankOperation(record.id);
	const { deleteOperation } = useBankMutations();
	const pending =
		!opened ||
		deleteOperation.isPending ||
		(query.isFetching && Boolean(error));
	return (
		<Modal
			opened={opened}
			onExitTransitionEnd={props.onClose}
			onClose={() => !pending && setOpened(false)}
			title={t("bank.deleteTitle")}
			closeOnEscape={!pending}
			closeOnClickOutside={!pending}
			closeButtonProps={{ "aria-label": t("bank.close"), disabled: pending }}
		>
			<Stack>
				<Text>
					{record.kind === "transfer"
						? t("bank.deleteTransfer", {
								amount: formatMoney(record.amount),
								source: record.cardName,
								target: record.targetCardName,
							})
						: t("bank.deleteHint", {
								kind: t(`bank.kinds.${record.kind}`),
								amount: formatMoney(record.amount),
								card: record.cardName,
							})}
				</Text>
				{error ? (
					<>
						<BankFeedback error={error} />
						<Button
							variant="default"
							disabled={pending}
							onClick={async () => {
								const result = await query.refetch();
								if (result.data && !result.error) setLatest(result.data);
								else setError(result.error);
							}}
						>
							{t("bank.reloadRecord")}
						</Button>
					</>
				) : null}
				{latest && (
					<>
						<Text>
							{t("bank.versionHint", {
								details: `${formatDate(latest.date)} · ${formatMoney(latest.amount)} · ${latest.description ?? ""}`,
							})}
						</Text>
						<Button
							variant="default"
							disabled={pending}
							onClick={() => {
								setRecord(latest);
								setLatest(undefined);
								setError(undefined);
							}}
						>
							{t("bank.adoptVersion", { version: latest.version })}
						</Button>
					</>
				)}
				<Group>
					<Button
						color="red"
						loading={pending}
						onClick={async () => {
							setError(undefined);
							try {
								await deleteOperation.mutateAsync({
									id: record.id,
									version: record.version,
								});
								setOpened(false);
							} catch (failure) {
								setError(failure);
							}
						}}
					>
						{t("bank.delete")}
					</Button>
					<Button
						variant="default"
						disabled={pending}
						onClick={() => setOpened(false)}
					>
						{t("bank.cancel")}
					</Button>
				</Group>
			</Stack>
		</Modal>
	);
};

export { DeleteOperation };