'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import React from 'react';
import ReactDatePickerDefaultImport, { registerLocale, setDefaultLocale } from 'react-datepicker';
const ReactDatePicker = 'default' in ReactDatePickerDefaultImport ? ReactDatePickerDefaultImport.default : ReactDatePickerDefaultImport;
import { CalendarIcon } from '../../icons/Calendar/index.js';
import { XIcon } from '../../icons/X/index.js';
import { useTranslation } from '../../providers/Translation/index.js';
import './library.scss';
import './index.scss';
import { getFormattedLocale } from './getFormattedLocale.js';
const baseClass = 'date-time-picker';
const DatePicker = (props)=>{
    const { id, displayFormat: customDisplayFormat, maxDate, maxTime, minDate, minTime, monthsToShow = 1, onChange: onChangeFromProps, overrides, pickerAppearance = 'default', placeholder: placeholderText, readOnly, timeFormat = 'h:mm aa', timeIntervals = 30, value } = props;
    // Use the user's AdminUI language preference for the locale
    const { i18n } = useTranslation();
    let dateFormat = customDisplayFormat;
    if (!customDisplayFormat) {
        // when no displayFormat is provided, determine format based on the picker appearance
        if (pickerAppearance === 'default') {
            dateFormat = 'MM/dd/yyyy';
        } else if (pickerAppearance === 'dayAndTime') {
            dateFormat = 'MMM d, yyy h:mm a';
        } else if (pickerAppearance === 'timeOnly') {
            dateFormat = 'h:mm a';
        } else if (pickerAppearance === 'dayOnly') {
            dateFormat = 'MMM dd';
        } else if (pickerAppearance === 'monthOnly') {
            dateFormat = 'MMMM';
        }
    }
    const onChange = (incomingDate)=>{
        const newDate = incomingDate;
        if (newDate instanceof Date && [
            'dayOnly',
            'default',
            'monthOnly'
        ].includes(pickerAppearance)) {
            const tzOffset = incomingDate.getTimezoneOffset() / 60;
            newDate.setHours(12 - tzOffset, 0);
        }
        if (newDate instanceof Date && !dateFormat.includes('SSS')) {
            // Unless the dateFormat includes milliseconds, set milliseconds to 0
            // This is to ensure that the timestamp is consistent with the displayFormat
            newDate.setMilliseconds(0);
        }
        if (typeof onChangeFromProps === 'function') {
            onChangeFromProps(newDate);
        }
    };
    const dateTimePickerProps = {
        customInputRef: 'ref',
        dateFormat,
        disabled: readOnly,
        maxDate,
        maxTime,
        minDate,
        minTime,
        monthsShown: Math.min(2, monthsToShow),
        onChange,
        placeholderText,
        popperPlacement: 'bottom-start',
        selected: value && new Date(value),
        showMonthYearPicker: pickerAppearance === 'monthOnly',
        showPopperArrow: false,
        showTimeSelect: pickerAppearance === 'dayAndTime' || pickerAppearance === 'timeOnly',
        timeFormat,
        timeIntervals,
        ...overrides
    };
    // to satisfy TypeScript. Overrides can enable selectsMultiple or selectsRange but then it's up to the user to ensure they pass in the correct onChange
    const classes = [
        baseClass,
        `${baseClass}__appearance--${pickerAppearance}`
    ].filter(Boolean).join(' ');
    React.useEffect(()=>{
        if (i18n.dateFNS) {
            try {
                const datepickerLocale = getFormattedLocale(i18n.language);
                registerLocale(datepickerLocale, i18n.dateFNS);
                setDefaultLocale(datepickerLocale);
            } catch (e) {
                // eslint-disable-next-line no-console
                console.warn(`Could not find DatePicker locale for ${i18n.language}`);
            }
        }
    }, [
        i18n.language,
        i18n.dateFNS
    ]);
    return /*#__PURE__*/ _jsxDEV("div", {
        className: classes,
        id: id,
        children: [
            /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__icon-wrap`,
                children: [
                    dateTimePickerProps.selected && /*#__PURE__*/ _jsxDEV("button", {
                        className: `${baseClass}__clear-button`,
                        onClick: ()=>onChange(null),
                        type: "button",
                        children: /*#__PURE__*/ _jsxDEV(XIcon, {}, void 0, false, {
                            fileName: "src/elements/DatePicker/DatePicker.tsx",
                            lineNumber: 135,
                            columnNumber: 13
                        }, this)
                    }, void 0, false, {
                        fileName: "src/elements/DatePicker/DatePicker.tsx",
                        lineNumber: 130,
                        columnNumber: 11
                    }, this),
                    /*#__PURE__*/ _jsxDEV(CalendarIcon, {}, void 0, false, {
                        fileName: "src/elements/DatePicker/DatePicker.tsx",
                        lineNumber: 138,
                        columnNumber: 9
                    }, this)
                ]
            }, void 0, true, {
                fileName: "src/elements/DatePicker/DatePicker.tsx",
                lineNumber: 128,
                columnNumber: 7
            }, this),
            /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__input-wrapper`,
                children: /*#__PURE__*/ _jsxDEV(ReactDatePicker, {
                    ...dateTimePickerProps,
                    dropdownMode: "select",
                    showMonthDropdown: true,
                    showYearDropdown: true
                }, void 0, false, {
                    fileName: "src/elements/DatePicker/DatePicker.tsx",
                    lineNumber: 141,
                    columnNumber: 9
                }, this)
            }, void 0, false, {
                fileName: "src/elements/DatePicker/DatePicker.tsx",
                lineNumber: 140,
                columnNumber: 7
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/elements/DatePicker/DatePicker.tsx",
        lineNumber: 127,
        columnNumber: 5
    }, this);
};
// eslint-disable-next-line no-restricted-exports
export default DatePicker;

//# sourceMappingURL=DatePicker.js.map