import type { FC } from "react";
import { BankCardForm } from "@/entities/bank-card";
import { DeleteOperation } from "../DeleteOperation/DeleteOperation";
import { OperationForm } from "../OperationForm/OperationForm";
import { CardPageView } from "./CardPage.view";
import { useCardPageVm } from "./CardPage.vm";

const CardPage: FC = () => {
	const vm = useCardPageVm();
	return (
		<>
			<CardPageView vm={vm} />
			{vm.editingCard && vm.card.data && (
				<BankCardForm
					card={vm.card.data}
					onClose={() => vm.setEditingCard(false)}
				/>
			)}
			{vm.operation && vm.card.data && vm.cards.data && (
				<OperationForm
					card={vm.card.data}
					cards={vm.cards.data}
					operation={vm.operation === "new" ? undefined : vm.operation}
					onClose={() => vm.setOperation(null)}
				/>
			)}
			{vm.deleting && (
				<DeleteOperation
					operation={vm.deleting}
					onClose={() => vm.setDeleting(null)}
				/>
			)}
		</>
	);
};

export { CardPage };