frontend/src/entities/bank-card/ui/BankPeriodPicker.tsx

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

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

export { BankPeriodPicker };