import React from "react";
import Flatpickr from "react-flatpickr";
import "flatpickr/dist/themes/material_blue.css";

interface DatepickerProps {
    value?: Date | Date[] | string;
    onChange: (date: Date | Date[] | null) => void;

    placeholder?: string;
    enableTime?: boolean;
    dateFormat?: string;

    className?: string;

    minDate?: string | Date;
    maxDate?: string | Date;

    mode?: "single" | "multiple" | "range";
    disabled?: boolean;

    disable?: ((date: Date) => boolean)[];
}

const Datepicker: React.FC<DatepickerProps> = ({
    value,
    onChange,
    placeholder = "Select date",
    enableTime = false,
    dateFormat = "Y-m-d",
    className = "",
    minDate,
    maxDate,
    mode = "single",
    disabled = false,
    disable = []
}) => {
    return (
        <Flatpickr
            value={value ?? undefined}
            options={{
                enableTime,
                dateFormat,
                minDate,
                maxDate,
                mode,
                allowInput: true,
                disable,
            }}
            onChange={(selectedDates) => {
                if (mode === "single") {
                    onChange(selectedDates.length ? selectedDates[0] : null);
                } else {
                    onChange(selectedDates);
                }
            }}
            className={`form-input w-full border border-gray-300 rounded px-3 py-2
                focus:border-blue-500 focus:ring-2 focus:ring-blue-200 ${className}`}
            placeholder={placeholder}
            disabled={disabled}
        />
    );
};

export default Datepicker;