import { handleOutsideClick } from '@/components/handleOutsideClick';
import { Button } from '@/components/ui/button';
import { Calendar } from '@/components/ui/calendar';
import { Label } from '@/components/ui/label';
import { cn } from '@/lib/utils';
import { format } from 'date-fns';
import { CalendarDays } from 'lucide-react';
import { useRef, useState } from 'react';

export default function DatePicker({
    date,
    setDate,
    label,
    disabled,
    align = 'start',
    className = '',
    labelClass = '',
}) {
    const [open, setOpen] = useState(false);
    const ref = useRef(null);

    handleOutsideClick(ref, setOpen);

    return (
        <div
            className={cn(
                'relative flex flex-col gap-1 items-start',
                className,
            )}>
            <Label
                className={cn(
                    'text-xs text-base-400 text-left w-full',
                    labelClass,
                )}>
                {label}
            </Label>
            <Button
                onClick={() => setOpen(!open)}
                variant="outline"
                className="hover:bg-white gap-4 w-full px-3 border-base-300/50 shadow-sm justify-between font-normal text-base-400">
                {date ? date : 'Select date'}
                <CalendarDays className="h-4 w-4 opacity-50" />
            </Button>
            <div
                ref={ref}
                className={cn(
                    'border w-fit rounded-md shadow absolute top-full mt-1 bg-white z-10 opacity-0 scale-95 invisible transition-all ease-in-out duration-200',
                    align === 'start' && 'left-0',
                    align === 'end' && 'right-0',
                    open && 'opacity-100 scale-100 visible',
                )}>
                <Calendar
                    mode="single"
                    selected={date ? new Date(date) : undefined}
                    defaultMonth={date ? new Date(date) : undefined}
                    captionLayout="dropdown"
                    onSelect={d => {
                        setDate(d ? format(d, 'yyyy-MM-dd') : '');
                        setOpen(false);
                    }}
                    disabled={disabled}
                />
            </div>
        </div>
    );
}