var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx } from "react/jsx-runtime";
import React, { forwardRef } from "react";
import DatePickerComp, { CalendarContainer } from "react-datepicker";
import { cn } from "@utils";
import "react-datepicker/dist/react-datepicker.css";
import { TextField } from "../textField";
import "../../components/datePicker/datePicker.styles.css";
function isValidDate(testDate) {
    if (testDate) {
        try {
            if (!(new Date(testDate) instanceof Date) || new Date(testDate).toString() === "Invalid Date") {
                return false;
            }
        }
        catch (_a) {
            return false;
        }
    }
    return true;
}
/**
 * DatePicker component that wraps react-datepicker with custom styling and text field integration
 *
 * @example
 * ```tsx
 * // Basic usage
 * <DatePicker
 *   selected={date}
 *   onChange={(date) => setDate(date)}
 * />
 *
 * // With time selection
 * <DatePicker
 *   selected={date}
 *   onChange={(date) => setDate(date)}
 *   showTimeSelect
 * />
 *
 * // Inline calendar
 * <DatePicker
 *   selected={date}
 *   onChange={(date) => setDate(date)}
 *   inline
 * />
 * ```
 */
export const DatePicker = forwardRef((_a, ref) => {
    var { inline = false, selected, showTimeSelect = false, textFieldProps } = _a, restProps = __rest(_a, ["inline", "selected", "showTimeSelect", "textFieldProps"]);
    const CustomContainer = ({ className, children }) => {
        return (_jsx("div", { ref: ref, className: cn("datepicker-container", !inline && "w-fit p-6 shadow-xs rounded relative dark:bg-secondary-800"), children: _jsx(CalendarContainer, { className: className, children: children }) }));
    };
    const DatepickerCustomInput = forwardRef((props, inputRef) => (_jsx(TextField, Object.assign({}, textFieldProps, props, { readOnly: true, ref: inputRef, className: cn("w-full", textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.className), "data-testid": "datepicker-input" }))));
    DatepickerCustomInput.displayName = "DatepickerCustomInput";
    const validDate = isValidDate(selected);
    if (!validDate) {
        console.error("DatePicker: Invalid date format");
        return null;
    }
    return (_jsx(DatePickerComp, Object.assign({}, restProps, { selected: selected, calendarContainer: CustomContainer, inline: inline, showTimeSelect: showTimeSelect, customInput: _jsx(DatepickerCustomInput, {}), popperPlacement: "bottom-start", showPopperArrow: false, wrapperClassName: "w-full", className: cn(
        // Calendar base styling
        "[&.react-datepicker]:border-none [&.react-datepicker]:bg-transparent", 
        // Header styling
        "[&_.react-datepicker__header]:border-none [&_.react-datepicker__header]:bg-transparent " +
            "[&_.react-datepicker__header]:rounded-none [&_.react-datepicker__header]:mb-2", "[&_.react-datepicker__header--time]:pt-1 [&_.react-datepicker__header--time]:mb-4", 
        // Current month styling
        "[&_.react-datepicker__current-month]:text-secondary-500 [&_.react-datepicker__current-month]:dark:text-secondary-50", 
        // Navigation
        "[&_.react-datepicker__navigation-icon]:before:border-gray-800 [&_.react-datepicker__navigation-icon]:before:border-t " +
            "[&_.react-datepicker__navigation-icon]:before:border-r", "[&_.react-datepicker__navigation-icon]:rtl:rotate-180 [&_.react-datepicker__navigation-icon]:rtl:-top-2.5", "[&_.react-datepicker__navigation--previous]:rtl:left-auto [&_.react-datepicker__navigation--previous]:rtl:right-[0px]", "[&_.react-datepicker__navigation--next]:rtl:right-auto [&_.react-datepicker__navigation--next]:rtl:left-[0px]", "[&_.react-datepicker__navigation--next--with-time]:rtl:!left-[122px] " +
            "[&_.react-datepicker__navigation--next--with-time]:rtl:!right-auto", 
        // Month styling
        "[&_.react-datepicker__month]:m-0", "[&_.react-datepicker__month-wrapper]:flex [&_.react-datepicker__month-wrapper]:gap-1 " +
            "[&_.react-datepicker__month-wrapper]:justify-evenly", "[&_.react-datepicker__month-container]:me-1 [&_.react-datepicker__month-container]:last:mr-0 " +
            "[&_.react-datepicker__month-container]:rtl:float-right", 
        // Month text - part 1
        "[&_.react-datepicker__month-text]:m-0 [&_.react-datepicker__month-text]:px-3 " +
            "[&_.react-datepicker__month-text]:py-2 [&_.react-datepicker__month-text]:text-base " +
            "[&_.react-datepicker__month-text]:rounded [&_.react-datepicker__month-text]:text-secondary-300", 
        // Month text - part 2
        "[&_.react-datepicker__month-text]:hover:bg-primary-50 [&_.react-datepicker__month-text]:hover:text-secondary-500 " +
            "[&_.react-datepicker__month-text]:ease-in-out [&_.react-datepicker__month-text]:duration-200", 
        // Month text - dark mode
        "[&_.react-datepicker__month-text]:dark:text-secondary-200 [&_.react-datepicker__month-text]:dark:hover:bg-secondary-600", 
        // Month text - keyboard selected
        "[&_.react-datepicker__month-text--keyboard-selected]:bg-primary-50 " +
            "[&_.react-datepicker__month-text--keyboard-selected]:text-secondary-500", "[&_.react-datepicker__month-text--keyboard-selected]:dark:bg-secondary-600 " +
            "[&_.react-datepicker__month-text--keyboard-selected]:dark:text-secondary-50", 
        // Month text - selected - part 1
        "[&_.react-datepicker__month-text--selected]:bg-primary-500 [&_.react-datepicker__month-text--selected]:text-white", 
        // Month text - selected - part 2
        "[&_.react-datepicker__month-text--selected]:hover:bg-primary-800 " +
            "[&_.react-datepicker__month-text--selected]:hover:text-white " +
            "[&_.react-datepicker__month-text--selected]:hover:rounded", 
        // Month text - selected - dark mode
        "[&_.react-datepicker__month-text--selected]:dark:hover:bg-primary-300 " +
            "[&_.react-datepicker__month-text--selected]:dark:hover:text-iridium " +
            "[&_.react-datepicker__month-text--selected]:dark:bg-primary-400 " +
            "[&_.react-datepicker__month-text--selected]:dark:text-iridium", 
        // Week styling
        "[&_.react-datepicker__week]:flex [&_.react-datepicker__week]:gap-1 " +
            "[&_.react-datepicker__week]:mb-1 [&_.react-datepicker__week]:last:mb-0", 
        // Day styling - part 1
        "[&_.react-datepicker__day]:m-0 [&_.react-datepicker__day]:w-[46px] " +
            "[&_.react-datepicker__day]:h-8 [&_.react-datepicker__day]:flex " +
            "[&_.react-datepicker__day]:items-center [&_.react-datepicker__day]:justify-center", 
        // Day styling - part 2
        "[&_.react-datepicker__day]:rounded [&_.react-datepicker__day]:text-base " +
            "[&_.react-datepicker__day]:text-secondary-500", 
        // Day styling - hover
        "[&_.react-datepicker__day]:hover:bg-primary-50 [&_.react-datepicker__day]:hover:rounded", 
        // Day styling - dark mode
        "[&_.react-datepicker__day]:dark:text-secondary-50 " +
            "[&_.react-datepicker__day]:dark:hover:bg-secondary-600 " +
            "[&_.react-datepicker__day]:dark:hover:text-secondary-200", 
        // Day names
        "[&_.react-datepicker__day-names]:flex [&_.react-datepicker__day-names]:gap-1 " +
            "[&_.react-datepicker__day-names]:mt-6", 
        // Day name - part 1
        "[&_.react-datepicker__day-name]:w-[46px] [&_.react-datepicker__day-name]:m-0 " +
            "[&_.react-datepicker__day-name]:text-base [&_.react-datepicker__day-name]:text-secondary-300", 
        // Day name - part 2
        "[&_.react-datepicker__day-name]:h-8 [&_.react-datepicker__day-name]:flex " +
            "[&_.react-datepicker__day-name]:items-center [&_.react-datepicker__day-name]:justify-center", 
        // Day name - dark mode
        "[&_.react-datepicker__day-name]:dark:text-secondary-200", 
        // Selected day - part 1
        "[&_.react-datepicker__day--selected]:text-white [&_.react-datepicker__day--selected]:bg-primary-500", 
        // Selected day - hover
        "[&_.react-datepicker__day--selected]:hover:bg-primary-800 " +
            "[&_.react-datepicker__day--selected]:hover:text-white " +
            "[&_.react-datepicker__day--selected]:hover:rounded", 
        // Selected day - dark mode
        "[&_.react-datepicker__day--selected]:dark:text-iridium " +
            "[&_.react-datepicker__day--selected]:dark:bg-primary-400 " +
            "[&_.react-datepicker__day--selected]:dark:hover:bg-primary-300 " +
            "[&_.react-datepicker__day--selected]:dark:hover:text-iridium", 
        // Day in range - part 1
        "[&_.react-datepicker__day--in-range]:bg-primary-50", 
        // Day in range - dark mode
        "[&_.react-datepicker__day--in-range]:dark:bg-secondary-600 " +
            "[&_.react-datepicker__day--in-range]:dark:text-secondary-200", 
        // Day in range - today - part 1
        "[&_.react-datepicker__day--in-range.react-datepicker__day--today]:text-secondary-500 " +
            "[&_.react-datepicker__day--in-range.react-datepicker__day--today]:font-medium", 
        // Day in range - today - part 2
        "[&_.react-datepicker__day--in-range.react-datepicker__day--today]:hover:bg-primary-50", 
        // Day in range - today - dark mode
        "[&_.react-datepicker__day--in-range.react-datepicker__day--today]:dark:text-secondary-200 " +
            "[&_.react-datepicker__day--in-range.react-datepicker__day--today]:dark:bg-secondary-600", 
        // Range start and end - part 1
        "[&_.react-datepicker__day--range-start]:bg-primary-500 " +
            "[&_.react-datepicker__day--range-start]:!text-white", 
        // Range start and end - part 2
        "[&_.react-datepicker__day--range-end]:bg-primary-500 " +
            "[&_.react-datepicker__day--range-end]:!text-white", 
        // Range start and end - hover - part 1
        "[&_.react-datepicker__day--range-start]:hover:!bg-primary-800 " +
            "[&_.react-datepicker__day--range-start]:hover:rounded", 
        // Range start and end - hover - part 2
        "[&_.react-datepicker__day--range-end]:hover:!bg-primary-800 " +
            "[&_.react-datepicker__day--range-end]:hover:rounded", 
        // Range start and end - dark mode - part 1
        "[&_.react-datepicker__day--range-start]:dark:!bg-primary-400 " +
            "[&_.react-datepicker__day--range-start]:dark:!text-iridium " +
            "[&_.react-datepicker__day--range-start]:dark:hover:!bg-primary-300", 
        // Range start and end - dark mode - part 2
        "[&_.react-datepicker__day--range-end]:dark:!bg-primary-400 " +
            "[&_.react-datepicker__day--range-end]:dark:!text-iridium " +
            "[&_.react-datepicker__day--range-end]:dark:hover:!bg-primary-300", 
        // Outside month - part 1
        "[&_.react-datepicker__day--outside-month]:pointer-events-none " +
            "[&_.react-datepicker__day--outside-month]:bg-transparent", 
        // Outside month - part 2
        "[&_.react-datepicker__day--outside-month]:text-secondary-100", 
        // Outside month - dark mode
        "[&_.react-datepicker__day--outside-month]:dark:text-secondary-400", 
        // Disabled day - part 1
        "[&_.react-datepicker__day--disabled]:bg-secondary-50 " +
            "[&_.react-datepicker__day--disabled]:text-secondary-200", 
        // Disabled day - dark mode
        "[&_.react-datepicker__day--disabled]:dark:text-secondary-400 " +
            "[&_.react-datepicker__day--disabled]:dark:bg-secondary-600 " +
            "[&_.react-datepicker__day--disabled]:dark:hover:text-secondary-400", 
        // Year styling
        "[&_.react-datepicker__year]:m-0", 
        // Year wrapper
        "[&_.react-datepicker__year-wrapper]:max-w-[222px] [&_.react-datepicker__year-wrapper]:mx-auto " +
            "[&_.react-datepicker__year-wrapper]:justify-center [&_.react-datepicker__year-wrapper]:gap-1", 
        // Year text - part 1
        "[&_.react-datepicker__year-text]:m-0 [&_.react-datepicker__year-text]:py-2 " +
            "[&_.react-datepicker__year-text]:px-3 [&_.react-datepicker__year-text]:text-secondary-300", 
        // Year text - part 2
        "[&_.react-datepicker__year-text]:text-md [&_.react-datepicker__year-text]:rounded", 
        // Year text - hover
        "[&_.react-datepicker__year-text]:hover:bg-primary-50 " +
            "[&_.react-datepicker__year-text]:hover:text-secondary-500", 
        // Year text - dark mode
        "[&_.react-datepicker__year-text]:dark:text-secondary-200 " +
            "[&_.react-datepicker__year-text]:dark:hover:bg-secondary-600 " +
            "[&_.react-datepicker__year-text]:dark:hover:text-secondary-200", 
        // Selected year - part 1
        "[&_.react-datepicker__year-text--selected]:bg-primary-500 " +
            "[&_.react-datepicker__year-text--selected]:text-white", 
        // Selected year - hover - part 1
        "[&_.react-datepicker__year-text--selected]:hover:bg-primary-800 " +
            "[&_.react-datepicker__year-text--selected]:hover:text-white", 
        // Selected year - hover - part 2
        "[&_.react-datepicker__year-text--selected]:hover:rounded " +
            "[&_.react-datepicker__year-text--selected]:ease-in-out " +
            "[&_.react-datepicker__year-text--selected]:duration-200", 
        // Selected year - dark mode - part 1
        "[&_.react-datepicker__year-text--selected]:dark:text-iridium " +
            "[&_.react-datepicker__year-text--selected]:dark:hover:text-iridium", 
        // Selected year - dark mode - part 2
        "[&_.react-datepicker__year-text--selected]:dark:bg-primary-400 " +
            "[&_.react-datepicker__year-text--selected]:dark:hover:bg-primary-300", 
        // Keyboard selected year - part 1
        "[&_.react-datepicker__year-text--keyboard-selected]:bg-primary-50 " +
            "[&_.react-datepicker__year-text--keyboard-selected]:text-secondary-500", 
        // Keyboard selected year - dark mode
        "[&_.react-datepicker__year-text--keyboard-selected]:dark:bg-secondary-600 " +
            "[&_.react-datepicker__year-text--keyboard-selected]:dark:text-secondary-50", 
        // Year header
        "[&_.react-datepicker-year-header]:mb-6 [&_.react-datepicker-year-header]:text-secondary-500 " +
            "[&_.react-datepicker-year-header]:text-md", 
        // Year header - dark mode
        "[&_.react-datepicker-year-header]:dark:text-secondary-50", 
        // Time container - part 1
        "[&_.react-datepicker__time]:text-secondary-500", "[&_.react-datepicker__time]:dark:bg-transparent", "[&_.react-datepicker__time-list]:!h-64", 
        // Time container - part 2
        "[&_.react-datepicker__time-container]:border-gray-200 [&_.react-datepicker__time-container]:w-fit " +
            "[&_.react-datepicker__time-container]:px-3 [&_.react-datepicker__time-container]:pb-3", 
        // Time container - RTL
        "[&_.react-datepicker__time-container]:rtl:border-l-0 " +
            "[&_.react-datepicker__time-container]:rtl:border-r-[1px]", 
        // Time list item - part 1
        "[&_.react-datepicker__time-list-item]:!h-8 [&_.react-datepicker__time-list-item]:text-base " +
            "[&_.react-datepicker__time-list-item]:text-secondary-500 [&_.react-datepicker__time-list-item]:rounded", 
        // Time list item - part 2
        "[&_.react-datepicker__time-list-item]:flex [&_.react-datepicker__time-list-item]:justify-center " +
            "[&_.react-datepicker__time-list-item]:items-center", 
        // Time list item - hover
        "[&_.react-datepicker__time-list-item]:hover:!bg-primary-50", 
        // Time list item - dark mode
        "[&_.react-datepicker__time-list-item]:dark:hover:!bg-secondary-600 " +
            "[&_.react-datepicker__time-list-item]:dark:text-secondary-50 " +
            "[&_.react-datepicker__time-list-item]:dark:hover:text-secondary-200", 
        // Selected time - part 1
        "[&_.react-datepicker__time-list-item--selected]:!bg-primary-500", "[&_.react-datepicker__time-list-item--selected]:hover:!bg-primary-700", 
        // Selected time - dark mode
        "[&_.react-datepicker__time-list-item--selected]:dark:!bg-primary-400 " +
            "[&_.react-datepicker__time-list-item--selected]:dark:!text-iridium " +
            "[&_.react-datepicker__time-list-item--selected]:dark:hover:!bg-primary-300", 
        // Time header
        "[&_.react-datepicker-time__header]:text-md [&_.react-datepicker-time__header]:text-secondary-500", "[&_.react-datepicker-time__header]:dark:text-secondary-50", 
        // Navigation with time
        "[&.react-datepicker_.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button)]:right-[116px]", 
        // Z-index
        "[&.react-datepicker-popper]:z-[2020]") })));
});
DatePicker.displayName = "DatePicker";
//# sourceMappingURL=datePicker.js.map