import type { FC } from "react";

import { Select, Stack, Text, TextInput } from "@mantine/core";
import { DateInput } from "@mantine/dates";

import { bankToday } from "../../model/form-validation";
import { useBankCardFieldsVm } from "./BankCardFields.vm";

type BankCardFieldsProps = { archived: boolean };

const BankCardFields: FC<BankCardFieldsProps> = (props) => {
	const {
		errors,
		onPaymentSystemChange,
		openingDate,
		paymentSystemField,
		paymentSystems,
		register,
		t,
	} = useBankCardFieldsVm();

	return (
		<Stack>
			<TextInput
				label={t("bank.name")}
				required
				{...register("name")}
				error={errors.name?.message}
			/>

			<TextInput
				label={t("bank.bankName")}
				{...register("bankName")}
				error={errors.bankName?.message}
			/>

			<TextInput
				inputMode="numeric"
				label={t("bank.lastFour")}
				{...register("lastFour")}
				error={errors.lastFour?.message}
			/>

			<Select
				{...paymentSystemField}
				clearable
				comboboxProps={{ withinPortal: false }}
				data={paymentSystems}
				error={errors.paymentSystem?.message}
				label={t("bank.paymentSystem")}
				onChange={onPaymentSystemChange}
				placeholder={t("bank.paymentSystemUnknown")}
				value={
					paymentSystemField.value
					|| null
				}
			/>

			<TextInput
				inputMode="decimal"
				label={t("bank.openingBalance")}
				readOnly={props.archived}
				required
				{...register("openingBalance")}
				error={errors.openingBalance?.message}
			/>

			<DateInput
				{...openingDate}
				error={errors.openingDate?.message}
				fixOnBlur={false}
				label={t("bank.openingDate")}
				maxDate={bankToday()}
				popoverProps={{
					middlewares: { shift: { crossAxis: true } },
					withinPortal: false,
				}}
				readOnly={props.archived}
				required
				valueFormat="DD.MM.YYYY"
			/>

			<Text c="dimmed" size="sm">
				{t("bank.openingHint")}
			</Text>

			{props.archived && <Text>{t("bank.archiveHint")}</Text>}
		</Stack>
	);
};

export { BankCardFields };