import * as React from 'react';
import { Calendar as CalendarIcon } from 'lucide-react';
import { format } from 'date-fns';
import { DateRange } from 'react-day-picker';

import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { Calendar } from '@/components/ui/calendar';
import {
	Popover,
	PopoverContent,
	PopoverTrigger,
} from '@/components/ui/popover';

interface DatePickerWithRangeProps {
	id?: string;
	className?: string;
	mode?: 'range';
	defaultMonth?: Date;
	fromDate?: Date;
	toDate?: Date;
	onValueChange?: (dateRange: DateRange | undefined) => void;
}

export function DatePickerWithRange({
	className,
	id,
	defaultMonth,
	fromDate,
	toDate,
	onValueChange,
}: DatePickerWithRangeProps) {
	const [date, setDate] = React.useState<DateRange | undefined>({
		from: fromDate,
		to: toDate,
	});

	React.useEffect(() => {
		setDate({
			from: fromDate,
			to: toDate,
		});
	}, [fromDate, toDate]);

	const handleSelect = (selectedDate: DateRange | undefined) => {
		setDate(selectedDate);
		onValueChange?.(selectedDate);
	};

	return (
		<div className={cn('grid gap-2', className)} id={id}>
			<Popover>
				<PopoverTrigger asChild>
					<Button
						id="date"
						variant={'outline'}
						className={cn(
							'w-full justify-start text-left font-normal',
							!date && 'text-muted-foreground'
						)}
					>
						<CalendarIcon className="mr-2 h-4 w-4" />
						{date?.from ? (
							date.to ? (
								<>
									{format(date.from, 'LLL dd, y')} -{' '}
									{format(date.to, 'LLL dd, y')}
								</>
							) : (
								format(date.from, 'LLL dd, y')
							)
						) : (
							<span>Pick a date range</span>
						)}
					</Button>
				</PopoverTrigger>
				<PopoverContent className="w-auto p-0" align="start">
					<Calendar
						initialFocus
						mode="range"
						defaultMonth={defaultMonth || date?.from}
						selected={date}
						onSelect={handleSelect}
						numberOfMonths={2}
					/>
				</PopoverContent>
			</Popover>
		</div>
	);
}