import React__default from 'react';
import PropTypes from 'prop-types';
import { t as tr } from '../react-datepicker-LIxGrEze.js';
import Stack from '../stack/index.js';
import Label from '../label/index.js';
import { useField } from '../use-form/index.js';
import Input from '../input/index.js';
import '../typeof-CgC7Bq6K.js';
import 'classnames';
import 'react-dom';
import '../Popper-CsEj9W8C.js';
import '../usePopper-DMhEmCof.js';
import '../warning-s9zGJbnw.js';
import '../extends-C4cduGrv.js';
import '../objectWithoutProperties-TXwlfNxG.js';
import '@reach/visually-hidden';
import '../slicedToArray-BB-AwwkK.js';
import '../defineProperty-CEd-kZQW.js';
import '../index-qSfOyGhk.js';
import '../auto-id.esm-Cly76abB.js';
import '../utils.esm-CKyxlHOy.js';
import '../_commonjsHelpers-_1FafXWI.js';
import '../use-progress/index.js';
import '../use-trailing-debounce/index.js';

function DateField(_ref) {
  var id = _ref.id,
      name = _ref.name,
      label = _ref.label,
      value = _ref.value,
      onChange = _ref.onChange;
  var field = useField({
    id: id,
    name: name,
    value: value,
    onChange: onChange
  });

  var handleChange = function handleChange(date) {
    field.onChange({
      target: {
        name: name,
        value: date === null || date === void 0 ? void 0 : date.toISOString()
      }
    });
  };

  var date = field.value ? new Date(field.value) : null;
  var state = field.error ? "error" : "default";
  return /*#__PURE__*/React__default.createElement(Stack, {
    spacing: 2,
    className: "design-date-field"
  }, /*#__PURE__*/React__default.createElement(Label, {
    htmlFor: field.id
  }, label), /*#__PURE__*/React__default.createElement(tr, {
    id: id,
    onBlur: field.onBlur,
    showPopperArrow: false,
    dateFormat: "MMMM d, yyyy",
    selected: date,
    onChange: handleChange,
    customInput: /*#__PURE__*/React__default.createElement(Input, {
      state: state
    })
  }));
}

DateField.propTypes = {
  id: PropTypes.string,
  name: PropTypes.string,
  label: PropTypes.string,
  value: PropTypes.string,
  onChange: PropTypes.func
};

export { DateField as default };
