import React, { forwardRef, useState } from 'react';
import classnames from 'classnames';
import { Input } from '../input';
import { TextArea } from '../textarea';
import { useFocusWithin } from '../hooks/use-focus-within';
import { jsx as _jsx } from "react/jsx-runtime";
const EditMode = /*#__PURE__*/forwardRef(({
  onSubmit,
  onBlur,
  onKeyDown,
  onCancel,
  inputLabel,
  isMultiline,
  onChange,
  placeholder,
  value,
  options,
  inputClassName,
  shouldDisplayControls
}, ref) => {
  const [touched, setTouched] = useState(false);
  const focusWithinProps = useFocusWithin({
    onBlur
  });
  function handleChange(providedValue) {
    setTouched(true);
    if (onChange) {
      return onChange(providedValue);
    }
  }
  const inputProps = {
    children: null,
    'aria-label': inputLabel,
    onKeyDown,
    placeholder: placeholder || inputLabel,
    onChange: handleChange,
    onSubmit,
    onCancel,
    value,
    'test-id': 'edit-text-input',
    'tour-id': 'edit-text',
    autoFocus: true,
    touched
  };
  return /*#__PURE__*/_jsx("form", {
    className: "edit-text-form",
    "test-id": "edit-text-form",
    onSubmit: onSubmit,
    ref: ref,
    onBlur: focusWithinProps.onBlur,
    children: isMultiline ? /*#__PURE__*/_jsx(TextArea, {
      className: classnames(inputClassName),
      shouldDisplayControls: false,
      rows: 3,
      ...inputProps,
      ...options
    }) : /*#__PURE__*/_jsx(Input, {
      className: classnames('edit-text-input', inputClassName, 'uil-input'),
      shouldDisplayControls: shouldDisplayControls,
      ...inputProps,
      ...options
    })
  });
});
EditMode.displayName = 'EditMode';
export default EditMode;