'use client';

import { add } from 'date-fns';

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

interface DateTimePickerProps {
    date?: Date;
    setDate: (date: Date) => void;
}

export function DateTimePicker({ date, setDate }: DateTimePickerProps) {
    /**
     * carry over the current time when a user clicks a new day
     * instead of resetting to 00:00
     */
    const handleSelect = (newDay: Date | undefined) => {
        if (!newDay) return;
        if (!date) {
            setDate(newDay);
            return;
        }
        const diff = newDay.getTime() - date.getTime();
        const diffInDays = diff / (1000 * 60 * 60 * 24);
        const newDateFull = add(date, { days: Math.ceil(diffInDays) });
        setDate(newDateFull);
    };

    return (
        <Popover>
            <PopoverTrigger asChild>
                <Button
                    variant={'outline'}
                    className={cn(
                        'min-w-[120px] justify-start rounded-md text-left font-normal',
                        !date && 'text-muted-foreground',
                    )}
                >
                    {date ? dayjs(date).format('DD/MM/YYYY HH:mm') : ''}
                </Button>
            </PopoverTrigger>
            <PopoverContent className="w-auto p-0">
                <Calendar
                    mode="single"
                    selected={date}
                    onSelect={(d) => handleSelect(d)}
                    initialFocus
                />
                <div className="border-border border-t p-3">
                    <TimePicker
                        setDate={(d) => {
                            if (d) {
                                setDate(d);
                            }
                        }}
                        date={date}
                    />
                </div>
            </PopoverContent>
        </Popover>
    );
}