import { useState } from "react";
import { useTranslation } from "react-i18next";

type BankPeriodPickerProps = {
	onChange: (value: [null | string, null | string]) => void;
	period: { from: string; to: string };
};

function useBankPeriodPickerVm(props: BankPeriodPickerProps) {
	const { onChange, period } = props;
	const { t } = useTranslation();
	const scope = `${period.from}-${period.to}`;

	const [draft, setDraft] = useState<{
		scope: string;
		value: [null | string, null | string];
	}>();

	const value: [null | string, null | string]
		= draft?.scope === scope ? draft.value : [period.from, period.to];

	const onPeriodChange = (next: [null | string, null | string]) => {
		setDraft({ scope, value: next });
		onChange(next);
	};

	return { onPeriodChange, t, value };
}

export { useBankPeriodPickerVm };