"use strict";

var _define = require("../preactement/define");
var _Autocomplete = require("../../Autocomplete");
var _wrapperUtils = require("../wrapperUtils");
var _TextField = require("../../TextField");
var _form = require("../shared-attributes/form");
var _useInlineError = require("../../InlineError/useInlineError");
var _utils = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const attributes = ['aria-clear-label', 'aria-complete-label',
// Using the lowercase HTML attribute name rather than `auto-focus` so it's
// more natural. There's no reason for us to worry about name collisions.
'autofocus', 'disabled', 'class-name', 'clear-input-text', 'clear-search-button', 'items', 'loading-message', 'loading', 'menu-heading-id', 'menu-heading', 'name', 'no-results-message', 'root-id', 'value', ..._form.formAttrs];
const Wrapper = _ref => {
  let {
    autofocus,
    clearSearchButton,
    hint,
    items,
    label,
    loading,
    menuHeading,
    menuHeadingId,
    name,
    rootId,
    value,
    ...otherProps
  } = _ref;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.Autocomplete, {
    ...otherProps,
    autoFocus: (0, _wrapperUtils.parseBooleanAttr)(autofocus),
    clearSearchButton: (0, _wrapperUtils.parseBooleanAttr)(clearSearchButton),
    id: rootId,
    items: (0, _wrapperUtils.parseJsonAttr)(items),
    label: menuHeading,
    labelId: menuHeadingId,
    loading: (0, _wrapperUtils.parseBooleanAttr)(loading),
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.TextField, {
      disabled: (0, _wrapperUtils.parseBooleanAttr)(otherProps.disabled),
      errorMessage: otherProps.errorMessage,
      errorPlacement: (0, _utils.isPossibleValue)(otherProps.errorPlacement, _useInlineError.errorPlacementValues) ? otherProps.errorPlacement : undefined,
      errorMessageClassName: otherProps.errorMessageClassName,
      label: label,
      hint: hint,
      name: name ?? 'autocomplete',
      value: value
    })
  });
};

/* eslint-disable @typescript-eslint/no-namespace */

/* eslint-enable */

(0, _define.define)('ds-autocomplete', () => Wrapper, {
  attributes,
  events: [['onChange', selectedItem => ({
    detail: {
      selectedItem
    }
  })], ['onInputValueChange', value => ({
    detail: {
      value
    }
  })]]
});