import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import { FormDescription, FormGroup, FormLabel, FormMessageList, } from '../../../../scalars/components/fragments/index.js';
import { cn } from '../../../../scalars/lib/utils.js';
import { BasePickerField } from '../date-time-picker/base-picker.js';
import { Calendar } from './subcomponents/calendar/calendar.js';
import { useDatePickerField } from './use-date-picker.js';
const DatePicker = forwardRef(({ label, id, errors, name, disabled, required, value, defaultValue, placeholder, description, warnings, onChange, onBlur, inputProps, disablePastDates, disableFutureDates, dateFormat, weekStart, autoClose = false, minDate, maxDate, 
// display props
className, ...props }, ref) => {
    const { date, inputValue, handleDateSelect, handleInputChange, isOpen, setIsOpen, handleBlur, disabledDates, weekStartDay, handleDayClick, } = useDatePickerField({
        value,
        defaultValue,
        onChange,
        onBlur,
        disablePastDates,
        disableFutureDates,
        dateFormat,
        weekStart,
        autoClose,
        minDate,
        maxDate,
    });
    return (_jsxs(FormGroup, { children: [label && (_jsx(FormLabel, { htmlFor: id, required: required, disabled: disabled, hasError: !!errors?.length, children: label })), _jsx(BasePickerField, { ref: ref, label: label, id: id, value: inputValue, name: name, errors: errors, disabled: disabled, required: required, iconName: "CalendarTime", placeholder: placeholder, isOpen: isOpen, setIsOpen: setIsOpen, onInputChange: handleInputChange, inputProps: inputProps, handleBlur: handleBlur, "data-cast": `DateString:${dateFormat}`, className: cn(
                // custom styles
                'px-4 pb-6 pt-3'), children: _jsx(Calendar, { mode: "single", selected: date, weekStartsOn: weekStartDay, onSelect: handleDateSelect, disabled: disabledDates, onDayClick: handleDayClick, className: cn('w-full', 'p-0', 
                    // dark
                    'dark:text-gray-500', 
                    // custom styles
                    'font-inter', 'text-[14px]', 'font-semibold', 'leading-[22px]', className), weekdaysClassName: cn('h-[34px]', 'gap-x-[3px]', 'dark:text-gray-600'), monthGridClassName: cn('w-full', 'px-[5.5px]'), dayClassName: cn('w-[34px] cursor-pointer text-[12px] text-gray-900 hover:rounded-[4px] hover:bg-gray-200', 
                    // dark
                    'dark:text-gray-50 dark:hover:bg-gray-900', 'disabled:text-gray-300', 
                    // Remove hover when selected
                    'aria-selected:hover:bg-gray-900 dark:aria-selected:hover:bg-gray-50', 
                    // Selected state
                    'aria-selected:!bg-gray-900 aria-selected:!text-white', 
                    // Dark mode selected state
                    'dark:aria-selected:!bg-gray-50 dark:aria-selected:!text-gray-900'), buttonPreviousClassName: cn('border border-gray-200', 
                    // hover
                    'hover:border-gray-300  hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-900', 
                    // dark
                    'dark:border-gray-900 dark:text-gray-300'), buttonNextClassName: cn('border border-gray-200', 
                    // hover
                    'hover:border-gray-300  hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-900', 
                    // dark
                    'dark:border-gray-900 dark:text-gray-300'), todayClassName: cn('rounded-[4px]', 'bg-gray-100', 
                    // dark
                    'dark:bg-gray-900 dark:text-gray-50', 
                    // When selected, apply these styles with !important to ensure priority
                    'aria-selected:!bg-gray-900 aria-selected:!text-white'), selectedClassName: cn('rounded-[4px]', '!bg-gray-900 !text-white', 'hover:bg-gray-900 hover:text-white', 
                    // dark
                    'dark:bg-gray-50 dark:text-gray-900', 'dark:hover:bg-gray-50 dark:hover:text-gray-900'), dayButtonClassName: cn('text-[12px] font-medium'), weekClassName: cn('w-full'), disabledClassName: cn('!cursor-not-allowed !text-gray-300 hover:!bg-transparent [&>button]:hover:!bg-transparent'), ...props }) }), description && _jsx(FormDescription, { children: description }), warnings && _jsx(FormMessageList, { messages: warnings, type: "warning" }), errors && _jsx(FormMessageList, { messages: errors, type: "error" })] }));
});
DatePicker.displayName = 'DatePicker';
export { DatePicker };
//# sourceMappingURL=date-picker.js.map