import { useController, useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";

import { type BankCardValues, paymentSystemValues } from "../../model/form.schema";
import { bankDateField } from "../bankDateField";

function useBankCardFieldsVm() {
	const {
		control,
		formState: { errors },
		register,
	} = useFormContext<BankCardValues>();

	const { t } = useTranslation();
	const { field: openingDateField } = useController({ control, name: "openingDate" });
	const { field: paymentSystemField } = useController({ control, name: "paymentSystem" });

	const paymentSystems = paymentSystemValues.map(value => ({
		label: t(`bank.paymentSystems.${value}`),
		value,
	}));

	const onPaymentSystemChange = (value: null | string) =>
		paymentSystemField.onChange(value ?? "");

	return {
		errors,
		onPaymentSystemChange,
		openingDate: { ...openingDateField, ...bankDateField(openingDateField) },
		paymentSystemField,
		paymentSystems,
		register,
		t,
	};
}

export { useBankCardFieldsVm };