import * as React from 'react';
import { Datepicker } from '../../../components/Datepicker';
import { useAdaptable } from '../../AdaptableContext';
import useProperty from '../../../components/utils/useProperty';
import { dateToISO, parseDateValue } from '../../../Utilities/Helpers/DateHelper';
const AdaptableDateInput = React.forwardRef(function AdaptableDateInputCmp(props, ref) {
    const dateInputOptions = useAdaptable().adaptableOptions.userInterfaceOptions.dateInputOptions;
    const { value: _, defaultValue: __, onChange, required, disabled, showClearButton, ...inputProps } = props;
    const [value, setValue] = useProperty(props, 'value', undefined, {
        onChange: (dateString) => 
        // wrap date value in ChangeEvent in order to keep the external API unchanged
        props.onChange?.({
            target: {
                // ALWAYS trigger onChange with the ISO format
                value: dateString,
            },
        }),
    });
    const dateValue = value ? parseDateValue(value) : null;
    const datepickerProps = {
        // this is OK as long as we do not support range datepicker
        value: dateValue,
        onChange: (dateValue) => 
        // convert to ISO8601 string format
        // see https://developer.mozilla.org/en-US/docs/Web/HTML/Date_and_time_formats#date_strings
        setValue(dateToISO(dateValue) ?? ''),
        required,
        disabled,
        dateProps: {
            format: dateInputOptions.dateFormat,
            locale: dateInputOptions.locale,
        },
        showWeekNumber: dateInputOptions.showWeekNumber,
        showOutsideDays: dateInputOptions.showOutsideDays,
        datepickerButtons: dateInputOptions.datepickerButtons,
        showClearButton,
        ...inputProps,
    };
    return React.createElement(Datepicker, { ref: ref, ...datepickerProps });
});
export default AdaptableDateInput;
