import React__default from 'react';
import PropTypes from 'prop-types';
import { t as tr } from '../react-datepicker-1efe39f0.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-6c6d8d7a.js';
import 'classnames';
import 'react-dom';
import '../Popper-c3cf68d1.js';
import '../usePopper-fcd8f86a.js';
import '../warning-ed2bf294.js';
import '../inject-css-ccd0a386.js';
import '../extends-e61fd370.js';
import '../objectWithoutProperties-72d23964.js';
import '@reach/visually-hidden';
import '../slicedToArray-5b664d46.js';
import '../defineProperty-18999f8e.js';
import '../index-81a9bdac.js';
import '../auto-id.esm-2b54f757.js';
import '../utils.esm-514fad91.js';
import '../_commonjsHelpers-57e89916.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 };
