import React, { useCallback } from "react";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Input } from "@/components/ui/input";
import { Calendar } from "@/components/ui/calendar";
import { formatDate } from "@/lib/utils/format";

export type DatePickerProps = {
    placeholder?: string;
    value?: Date;
    onChange?: (value?: Date) => void;
};

export const DatePicker: React.FC<DatePickerProps> = (props) => {
    const {
        placeholder,
        value,
        onChange
    } = props;

    const [open, setOpen] = React.useState(false);

    const handleSelect = useCallback((date?: Date) => {
        if(onChange) {
            onChange(date);
        }

        setOpen(false);
    }, [onChange]);

    return (
        <Popover open={open} onOpenChange={setOpen}>
            <PopoverTrigger asChild>
                <div>
                    <Input
                      readOnly
                      placeholder={placeholder}
                      value={value ? formatDate(value) : ""} />
                </div>
            </PopoverTrigger>

            <PopoverContent className="w-auto p-0" align="start">
                <Calendar
                  mode="single"
                  selected={value}
                  defaultMonth={value}
                  onSelect={handleSelect} />
            </PopoverContent>
        </Popover>
    );
};