import { define } from "../preactement/define";
import { Autocomplete } from "../../Autocomplete";
import { parseBooleanAttr, parseJsonAttr } from "../wrapperUtils";
import { TextField } from "../../TextField";
import { formAttrs } from "../shared-attributes/form";
import { errorPlacementValues } from "../../InlineError/useInlineError";
import { isPossibleValue } from "../utils";
import { jsx as _jsx } from "preact/compat/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', ...formAttrs];
const Wrapper = _ref => {
  let {
    autofocus,
    clearSearchButton,
    hint,
    items,
    label,
    loading,
    menuHeading,
    menuHeadingId,
    name,
    rootId,
    value,
    ...otherProps
  } = _ref;
  return /*#__PURE__*/_jsx(Autocomplete, {
    ...otherProps,
    autoFocus: parseBooleanAttr(autofocus),
    clearSearchButton: parseBooleanAttr(clearSearchButton),
    id: rootId,
    items: parseJsonAttr(items),
    label: menuHeading,
    labelId: menuHeadingId,
    loading: parseBooleanAttr(loading),
    children: /*#__PURE__*/_jsx(TextField, {
      disabled: parseBooleanAttr(otherProps.disabled),
      errorMessage: otherProps.errorMessage,
      errorPlacement: isPossibleValue(otherProps.errorPlacement, errorPlacementValues) ? otherProps.errorPlacement : undefined,
      errorMessageClassName: otherProps.errorMessageClassName,
      label: label,
      hint: hint,
      name: name ?? 'autocomplete',
      value: value
    })
  });
};

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

/* eslint-enable */

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