import { DatePickerInput } from "@mantine/dates";
import { type FC, useState } from "react";
import { useTranslation } from "react-i18next";

type BankPeriodPickerProps = {
	period: { from: string; to: string };
	onChange: (value: [string | null, string | null]) => void;
};
const BankPeriodPicker: FC<BankPeriodPickerProps> = (props) => {
	const { period, onChange } = props;
	const { t } = useTranslation();
	const scope = `${period.from}-${period.to}`;
	const [draft, setDraft] = useState<{
		scope: string;
		value: [string | null, string | null];
	}>();
	const value: [string | null, string | null] =
		draft?.scope === scope ? draft.value : [period.from, period.to];
	return (
		<DatePickerInput
			type="range"
			allowSingleDateInRange
			label={t("bank.period")}
			valueFormat="DD.MM.YYYY"
			value={value}
			onChange={(next) => {
				setDraft({ scope, value: next });
				onChange(next);
			}}
			popoverProps={{
				returnFocus: true,
				middlewares: { shift: { crossAxis: true } },
			}}
		/>
	);
};

export { BankPeriodPicker };