/**
 * This Source Code is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 *
 * Copyright (c) Infonomic Company Limited
 */
import { DatePicker, ErrorText } from '@byline/ui/react';
import cx from 'clsx';
import { useFieldError, useFieldValue, useIsDirty } from '../../forms/form-context';
import styles from './datetime-field.module.css';
export const DateTimeField = ({ field, value, defaultValue, onChange, id, path, }) => {
    const fieldPath = path ?? field.name;
    const fieldError = useFieldError(fieldPath);
    const isDirty = useIsDirty(fieldPath);
    const fieldValue = useFieldValue(fieldPath);
    const incomingValue = value ?? fieldValue ?? defaultValue ?? null;
    return (<div className={`byline-field-datetime ${field.name}`}>
      <DatePicker id={id ?? fieldPath} name={field.name} label={field.label} required={!field.optional} initialValue={incomingValue} mode={field.mode || 'datetime'} yearsInFuture={field.yearsInFuture || 1} yearsInPast={field.yearsInPast || 10} onDateChange={(date) => onChange?.(date)} className={cx(isDirty && ['byline-field-datetime-dirty', styles.dirty])}/>
      {fieldError && <ErrorText id={`${field.name}-error`} text={fieldError}/>}
    </div>);
};