'use client';
import { getTranslation } from '@payloadcms/translations';
import React, { useCallback } from 'react';
import { DatePickerField } from '../../../elements/DatePicker/index.js';
import { useTranslation } from '../../../providers/Translation/index.js';
import useField from '../../useField/index.js';
import { fieldBaseClass } from '../shared.js';
const baseClass = 'date-time-field';
const DateTime = (props)=>{
    const { name, AfterInput, BeforeInput, Description, Error, Label: LabelComp, className, label, path: pathFromProps, placeholder, readOnly, required, style, validate, width } = props;
    const Label = LabelComp || label;
    const datePickerProps = 'date' in props ? props.date : {};
    const { i18n } = useTranslation();
    const memoizedValidate = useCallback((value, options)=>{
        if (typeof validate === 'function') {
            return validate(value, {
                ...options,
                required
            });
        }
    }, [
        validate,
        required
    ]);
    const { path, setValue, showError, value } = useField({
        path: pathFromProps || name,
        validate: memoizedValidate
    });
    return /*#__PURE__*/ React.createElement("div", {
        className: [
            fieldBaseClass,
            baseClass,
            className,
            showError && `${baseClass}--has-error`,
            readOnly && 'read-only'
        ].filter(Boolean).join(' '),
        style: {
            ...style,
            width
        }
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__error-wrap`
    }, Error), Label, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__input-wrapper`,
        id: `field-${path.replace(/\./g, '__')}`
    }, BeforeInput, /*#__PURE__*/ React.createElement(DatePickerField, {
        ...datePickerProps,
        onChange: (incomingDate)=>{
            if (!readOnly) setValue(incomingDate?.toISOString() || null);
        },
        placeholder: getTranslation(placeholder, i18n),
        readOnly: readOnly,
        value: value
    }), AfterInput), Description);
};
export default DateTime;

//# sourceMappingURL=index.js.map