import * as React from 'react';
import { format } from 'date-fns';
import { id } from 'date-fns/locale';
import { CalendarIcon } from 'lucide-react';

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 DatePickerProps {
    value?: Date | string | null;
    onChange?: (date: Date | undefined) => void;
    placeholder?: string;
    disabled?: boolean;
    className?: string;
    name?: string;
    id?: string;
    min?: Date;
    max?: Date;
}

function DatePicker({
    value,
    onChange,
    placeholder = 'Pilih tanggal',
    disabled = false,
    className,
    name,
    id,
    min,
    max,
}: DatePickerProps) {
    const [open, setOpen] = React.useState(false);

    const date = React.useMemo(() => {
        if (!value) return undefined;
        if (value instanceof Date) return value;
        return new Date(value);
    }, [value]);

    const formattedDate = React.useMemo(() => {
        if (!date) return '';
        return format(date, 'dd MMM yyyy', { locale: id });
    }, [date]);

    return (
        <Popover open={open} onOpenChange={setOpen}>
            <PopoverTrigger asChild>
                <Button
                    id={id}
                    variant="outline"
                    disabled={disabled}
                    className={cn(
                        'w-full justify-start text-left font-normal',
                        !date && 'text-muted-foreground',
                        className,
                    )}
                >
                    <CalendarIcon className="mr-2 h-4 w-4" />
                    {date ? formattedDate : placeholder}
                </Button>
            </PopoverTrigger>
            <PopoverContent className="w-auto p-0" align="start">
                <Calendar
                    mode="single"
                    selected={date}
                    onSelect={(selectedDate) => {
                        onChange?.(selectedDate);
                        setOpen(false);
                    }}
                    disabled={(date) => {
                        if (min && date < min) return true;
                        if (max && date > max) return true;
                        return false;
                    }}
                    initialFocus
                />
            </PopoverContent>
            {name && (
                <input
                    type="hidden"
                    name={name}
                    value={date ? format(date, 'yyyy-MM-dd') : ''}
                />
            )}
        </Popover>
    );
}

export { DatePicker };