import { Button, Group, Modal, Stack, Text } from "@mantine/core";
import { type FC } from "react";
import { FormProvider } from "react-hook-form";

import { formatDate } from "@/shared/lib";

import { type BankCard } from "../../api/queries";
import { BankFeedback } from "../BankFeedback";
import classes from "../BankForms.module.css";
import { BankCardFields } from "./BankCardForm.view";
import { useBankCardFormVm } from "./BankCardForm.vm";

type BankCardFormProps = { card?: BankCard; onClose: () => void };

const BankCardForm: FC<BankCardFormProps> = (props) => {
	const {
		dialogTitle,
		error,
		isPending,
		latest,
		methods,
		onAdoptVersion,
		onCancel,
		onReloadRecord,
		onRequestClose,
		onSubmit,
		opened,
		t,
	} = useBankCardFormVm(props);

	return (
		<Modal
			closeButtonProps={{ "aria-label": t("bank.close"), "disabled": isPending }}
			closeOnClickOutside={!isPending}
			closeOnEscape={!isPending}
			onClose={onRequestClose}
			onExitTransitionEnd={props.onClose}
			opened={opened}
			title={dialogTitle}
		>
			<FormProvider {...methods}>
				<form onSubmit={onSubmit}>
					<fieldset className={classes.fieldset} disabled={isPending}>
						<Stack>
							<BankCardFields archived={Boolean(props.card?.archivedAt)} />

							{!!error && (
								<>
									<BankFeedback error={error} />

									{props.card && (
										<Button onClick={onReloadRecord} variant="default">
											{t("bank.reloadRecord")}
										</Button>
									)}
								</>
							)}

							{latest && (
								<>
									<Text>
										{t("bank.versionHint", {
											details: `${latest.name} · ${latest.openingBalance.value} RUB · ${formatDate(latest.openingDate)}`,
										})}
									</Text>

									<Button onClick={onAdoptVersion} variant="default">
										{t("bank.adoptVersion", { version: latest.version })}
									</Button>
								</>
							)}

							<Group>
								<Button loading={isPending} type="submit">
									{t("bank.save")}
								</Button>

								<Button onClick={onCancel} variant="default">
									{t("bank.cancel")}
								</Button>
							</Group>
						</Stack>
					</fieldset>
				</form>
			</FormProvider>
		</Modal>
	);
};

export { BankCardForm };