import { clsx } from 'clsx';
import { Component, createRef } from 'react';
import { Input } from '../../inputs/Input.mjs';
import { jsx, jsxs } from 'react/jsx-runtime';

/* eslint-disable jsx-a11y/no-autofocus */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
const DEFAULT_INPUT_MIN_WIDTH = 10;
class TypeaheadInput extends Component {
  inputRef = /*#__PURE__*/createRef();
  sizerRef = /*#__PURE__*/createRef();
  constructor(props) {
    super(props);
    this.state = {
      inputWidth: DEFAULT_INPUT_MIN_WIDTH,
      keyboardFocusedOptionIndex: null
    };
  }
  componentDidMount() {
    const {
      autoFocus
    } = this.props;
    if (autoFocus) {
      // Autofocus after context code executions (e.g open Modal) is completed
      setTimeout(() => {
        this.inputRef.current?.focus();
      });
    }
  }
  componentDidUpdate(previousProps) {
    if (previousProps.value !== this.props.value && this.props.multiple) {
      this.recalculateWidth();
    }
  }
  recalculateWidth = () => {
    requestAnimationFrame(() => {
      this.setState({
        inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, this.sizerRef.current?.scrollWidth ?? 0 + 10)
      });
    });
  };
  renderInput = () => {
    const {
      typeaheadId,
      autoFocus,
      multiple,
      name,
      dropdownOpen,
      placeholder,
      selected,
      value,
      onChange,
      onKeyDown,
      onFocus,
      onPaste,
      autoComplete,
      ariaActivedescendant // Declare the ariaActivedescendant variable
    } = this.props;
    const {
      inputWidth
    } = this.state;
    const hasPlaceholder = !multiple || selected.length === 0;
    return /*#__PURE__*/jsx(Input, {
      ref: this.inputRef,
      className: clsx(multiple && 'typeahead__input'),
      name: name,
      id: `input-${typeaheadId}`,
      "aria-activedescendant": ariaActivedescendant ? `menu-${typeaheadId} ${ariaActivedescendant}` : `menu-${typeaheadId}`,
      autoFocus: autoFocus,
      placeholder: hasPlaceholder ? placeholder : '',
      "aria-autocomplete": "list",
      "aria-expanded": dropdownOpen,
      "aria-haspopup": "listbox",
      "aria-controls": dropdownOpen ? `menu-${typeaheadId}` : undefined,
      autoComplete: autoComplete,
      role: "combobox",
      value: value,
      style: multiple && selected.length > 0 ? {
        width: inputWidth
      } : {},
      onChange: onChange,
      onKeyDown: onKeyDown,
      onClick: onFocus,
      onFocus: onFocus,
      onPaste: onPaste
    });
  };
  render() {
    const {
      multiple,
      selected,
      value,
      maxHeight,
      renderChip
    } = this.props;
    return multiple ? /*#__PURE__*/jsxs("div", {
      className: "form-control typeahead__input-container",
      style: {
        maxHeight
      },
      onClick: () => {
        this.inputRef.current?.focus();
      },
      children: [/*#__PURE__*/jsxs("div", {
        className: "typeahead__input-wrapper",
        children: [selected && selected.map((chip, idx) => renderChip(chip, idx)), this.renderInput(), /*#__PURE__*/jsx("div", {
          className: "typeahead__input-aligner"
        })]
      }), /*#__PURE__*/jsx("div", {
        ref: this.sizerRef,
        className: "sizer form-control typeahead__input",
        children: value
      })]
    }) : this.renderInput();
  }
}

export { TypeaheadInput as default };
//# sourceMappingURL=TypeaheadInput.mjs.map
