import type { Control } from "react-hook-form";

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

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

function usePaymentSystemField(control: Control<BankCardValues>) {
	const { t } = useTranslation();

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

	const paymentSystems = ["mir", "visa", "mastercard"].map(value => ({
		label: t(`bank.paymentSystems.${value}`),
		value,
	}));

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

	return { onPaymentSystemChange, paymentSystemField, paymentSystems };
}

export { usePaymentSystemField };