import { IconButton } from "@wix/design-system";
import { Add, ArrowRight, Stop } from "@wix/wix-ui-icons-common";
import classNames from "classnames";
import React, { useContext } from "react";
import { RicosContext } from "./../../ricos-context/index.js";
import { AttachmentBar } from "./attachment-bar/attachment-bar.js";
import {
  useAutoHeight,
  useFocusCallback,
  useKeyboardHandler
} from "./prompt-input-area-common.js";
import classes from "./prompt-input-area-scss.js";
import { WidgetPromptInputArea } from "./widget-prompt-input-area.js";
const PromptInputArea = React.forwardRef(
  ({
    busy,
    readonly,
    placeholder,
    maxLength,
    onChange,
    onSubmit,
    onRemoveAttachment,
    value,
    busyValue,
    onCancel,
    dataHook,
    minHeight,
    forceMultiline: forceMultilineProp,
    attachments = [],
    className,
    style,
    presetBarComponent,
    actionBarComponent,
    fileUploadFn
  }, ref) => {
    const { t } = useContext(RicosContext);
    const inputRef = React.useRef(null);
    const { focus } = useFocusCallback(inputRef);
    React.useImperativeHandle(ref, () => ({ focus }), [focus]);
    const showPresetBar = Boolean(presetBarComponent);
    const allowFileUpload = Boolean(fileUploadFn);
    const showAttachments = allowFileUpload && attachments.length > 0;
    const forceMultiline = forceMultilineProp || showPresetBar || showAttachments || false;
    const { isMultiline, hiddenInputRef } = useAutoHeight({
      inputRef,
      value,
      forceMultiline,
      minHeight,
      baseLineHeight: 24
    });
    const handleSubmit = React.useCallback(() => {
      if (!value.trim()) {
        return;
      }
      onSubmit();
    }, [value, onSubmit]);
    const { onKeyDown } = useKeyboardHandler({ busy, onEsc: onCancel, onEnter: handleSubmit });
    const displayedValue = busy ? busyValue ?? t("AIPlugin_Input_Loading_Text") : value;
    return /* @__PURE__ */ React.createElement(
      "div",
      {
        className: classNames(
          classes.root,
          {
            [classes.multiline]: isMultiline,
            [classes.forceMultiline]: forceMultiline
          },
          className
        ),
        style
      },
      (showPresetBar || showAttachments) && /* @__PURE__ */ React.createElement("div", { className: classes.topBar }, presetBarComponent, showAttachments ? /* @__PURE__ */ React.createElement(AttachmentBar, { attachments, onRemove: (id) => onRemoveAttachment?.(id) }) : null),
      /* @__PURE__ */ React.createElement(
        "textarea",
        {
          ref: hiddenInputRef,
          className: classNames(classes.textInput, classes.hiddenInput, {
            [classes.forceMultiline]: forceMultiline,
            [classes.allowFileUpload]: allowFileUpload
          }),
          value: displayedValue,
          readOnly: true,
          "aria-hidden": true
        }
      ),
      /* @__PURE__ */ React.createElement(
        "textarea",
        {
          ref: inputRef,
          "data-hook": dataHook,
          name: t(placeholder ?? "AIPlugin_Input_Placeholder_Text"),
          className: classNames(classes.textInput, {
            [classes.hasTopBar]: showPresetBar || showAttachments,
            [classes.forceMultiline]: forceMultiline,
            [classes.allowFileUpload]: allowFileUpload,
            [classes.disabled]: busy
          }),
          placeholder: t(placeholder ?? "AIPlugin_Input_Placeholder_Text"),
          value: displayedValue,
          onChange: (e) => {
            onChange?.(e.target.value);
          },
          maxLength,
          readOnly: readonly,
          disabled: busy,
          onKeyDown
        }
      ),
      /* @__PURE__ */ React.createElement(
        "div",
        {
          className: classNames(classes.actionsContainer, {
            [classes.forceMultiline]: forceMultiline,
            [classes.allowFileUpload]: allowFileUpload
          })
        },
        (allowFileUpload || actionBarComponent) && /* @__PURE__ */ React.createElement("div", { className: classes.actionBar }, allowFileUpload && /* @__PURE__ */ React.createElement(
          IconButton,
          {
            onClick: async () => {
              await fileUploadFn?.();
            },
            priority: "tertiary",
            skin: "dark",
            disabled: busy
          },
          /* @__PURE__ */ React.createElement(Add, null)
        ), actionBarComponent),
        /* @__PURE__ */ React.createElement("div", { className: classes.trailing }, busy ? /* @__PURE__ */ React.createElement(IconButton, { onClick: onCancel, priority: "secondary" }, /* @__PURE__ */ React.createElement(Stop, null)) : /* @__PURE__ */ React.createElement(IconButton, { onClick: handleSubmit, disabled: !value }, /* @__PURE__ */ React.createElement(ArrowRight, null)))
      )
    );
  }
);
PromptInputArea.displayName = "PromptInputArea";
export {
  PromptInputArea,
  WidgetPromptInputArea
};
//# sourceMappingURL=prompt-input-area.js.map
