frontend/src/pages/card/ui/DeleteOperation/DeleteOperation.vm.ts

import { notifications } from "@mantine/notifications";
import { useState } from "react";
import { useTranslation } from "react-i18next";

import {
	type BankOperation,
	useBankFormFocus,
	useBankOperation,
	useDeleteBankOperation,
} from "@/entities/bank-card";

type DeleteOperationProps = { onClose: () => void; operation: BankOperation };

function useDeleteOperationVm(props: DeleteOperationProps) {
	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 operationDeletion = useDeleteBankOperation();

	const isPending
		= !opened
			|| operationDeletion.isPending
			|| (query.isFetching && Boolean(error));

	const onRequestClose = () => !isPending && setOpened(false);

	const onReloadRecord = async () => {
		const result = await query.refetch();
		if (result.data && !result.error) setLatest(result.data);
		else setError(result.error);
	};

	const onAdoptVersion = () => {
		if (!latest) return;
		setRecord(latest);
		setLatest(undefined);
		setError(undefined);
	};

	const onDelete = async () => {
		setError(undefined);

		try {
			const actionId = crypto.randomUUID();
			await operationDeletion.mutateAsync({
				id: record.id,
				version: record.version,
			});

			notifications.show({
				id: "bank-operation-deleted-" + actionId,
				message: t("bank.operationDeleted"),
			});
			setOpened(false);
		}
		catch (error_) {
			setError(error_);
		}
	};

	const onCancel = () => setOpened(false);

	return {
		error,
		isPending,
		latest,
		onAdoptVersion,
		onCancel,
		onDelete,
		onReloadRecord,
		onRequestClose,
		opened,
		record,
		t,
	};
}

export { useDeleteOperationVm };