import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn, FormDescription, FormGroup, FormLabel, FormMessageList, } from "#scalars";
import { forwardRef } from "react";
import { BasePickerField } from "./base-picker.js";
import DateTimePickerContent from "./date-time-picker-content.js";
import { useDateTimePicker } from "./use-date-time-picker.js";
const DateTimePicker = forwardRef(({ name, id, label, value, defaultValue, errors, disabled, required, placeholder, description, warnings, onChange, onBlur, 
// Date Picker Field
disablePastDates, disableFutureDates, dateFormat, weekStart, autoClose, minDate, maxDate, onChangeDate, onBlurDate, timeFormat, 
// Time Picker Field
timeIntervals, timeZone, showTimezoneSelect, includeContinent, ...props }, ref) => {
    const { isOpen, setIsOpen, 
    // inputValue,
    activeTab, onChangeTabs, isCalendarView, dateTimeToDisplay, handleInputChangeField, 
    // Date Picker Field
    date, handleDateSelect, disabledDates, weekStartDay, handleDayClick, handleOnBlur, 
    // Time Picker Field
    selectedHour, selectedMinute, selectedPeriod, setSelectedHour, setSelectedMinute, setSelectedPeriod, hours, minutes, onCancel, handleSave, timeZonesOptions, selectedTimeZone, is12HourFormat, setSelectedTimeZone, isDisableSelect, } = useDateTimePicker({
        value,
        defaultValue,
        onChange,
        onBlur,
        // Date Picker Field
        autoClose,
        disableFutureDates,
        disablePastDates,
        dateFormat,
        weekStart,
        onChangeDate,
        onBlurDate,
        minDate,
        maxDate,
        // Time Picker Field
        timeFormat,
        timeIntervals,
        timeZone,
        showTimezoneSelect,
        includeContinent,
    });
    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: dateTimeToDisplay, name: name, errors: errors, disabled: disabled, required: required, iconName: "CalendarTime", placeholder: placeholder, isOpen: isOpen, setIsOpen: setIsOpen, onInputChange: handleInputChangeField, handleBlur: handleOnBlur, "data-cast": `DateTimeString:${dateFormat}`, className: cn(
                // Add custom styles when the time is open
                isCalendarView ? "px-4 pb-6 pt-3" : "px-4 pb-4 pt-3"), children: _jsx(DateTimePickerContent, { activeTab: activeTab, onChangeTabs: onChangeTabs, 
                    // Date Picker Field
                    date: date, handleDateSelect: handleDateSelect, disabledDates: disabledDates, weekStartDay: weekStartDay, handleDayClick: handleDayClick, 
                    // Time Picker Field
                    selectedHour: selectedHour, selectedMinute: selectedMinute, selectedPeriod: selectedPeriod, setSelectedHour: setSelectedHour, setSelectedMinute: setSelectedMinute, setSelectedPeriod: setSelectedPeriod, hours: hours, minutes: minutes, timeZonesOptions: timeZonesOptions, selectedTimeZone: selectedTimeZone, setSelectedTimeZone: setSelectedTimeZone, timeZone: timeZone, is12HourFormat: is12HourFormat, isDisableSelect: isDisableSelect, onCancel: onCancel, onSave: handleSave }) }), description && _jsx(FormDescription, { children: description }), warnings && _jsx(FormMessageList, { messages: warnings, type: "warning" }), errors && _jsx(FormMessageList, { messages: errors, type: "error" })] }));
});
DateTimePicker.displayName = "DateTimePicker";
export { DateTimePicker };
//# sourceMappingURL=date-time-picker.js.map