export const isOutsideRange = (day, cutOffDate) => {
	const isAfterToday = moment().isAfter(day, 'day');

	if (cutOffDate) {
		return !moment(day).isSameOrBefore(cutOffDate) || isAfterToday;
	} else {
		return isAfterToday;
	}
};

export const DateRange = ({
	isDateDisabled = isOutsideRange,
	startDate,
	endDate,
	onDatesChange,
	initialVisibleMonth,
	cutOffDate,
	allowPastDates,
	ResetIcon,
}) => {
	const [focusedInput, setFocusedInput] = useState(START_DATE);

	const onDatesChangeCallback = useCallback(
		({ startDate, endDate }) => {
			let start = startDate?.clone().utc(0).startOf('day');
			let end = endDate?.clone().utc(0).endOf('day');

			onDatesChange({
				startDate: start,
				endDate: end,
			});
		},
		[onDatesChange]
	);

	const onClear = useCallback(() => {
		onDatesChange({ startDate: null, endDate: null });
		setFocusedInput(START_DATE);
	}, [onDatesChange]);

	return (
		<>
			<PeriodHeader
				startDate={startDate?.format('L')}
				endDate={endDate?.format('L')}
				onClear={onClear}
				ResetIcon={ResetIcon}
			/>
			<Styled.Section className="date-range">
				<DayPickerRangeController
					startDate={startDate}
					endDate={endDate}
					onDatesChange={onDatesChangeCallback}
					focusedInput={focusedInput}
					onFocusChange={focusedInput => {
						setFocusedInput(!focusedInput ? START_DATE : focusedInput);
					}}
					numberOfMonths={1}
					isOutsideRange={day =>
						!allowPastDates &&
						isDateDisabled(
							day,
							cutOffDate ? moment(+cutOffDate).add(1, 'months') : null
						)
					}
					weekDayFormat={'dd'}
					minimumNights={0}
					navPrev={<Styled.NavPrevButton />}
					navNext={<Styled.NavNextButton data-test="date-selector-next-button" />}
					daySize={40}
					enableOutsideDays
					initialVisibleMonth={() => moment(initialVisibleMonth || startDate)}
					verticalBorderSpacing={4}
				/>
			</Styled.Section>
		</>
	);
};