import { Box, FormField, InputArea, Loader, Popover, Text } from "@wix/design-system";
import { StatusWarningFilled } from "@wix/wix-ui-icons-common";
import classNames from "classnames";
import React, { useContext } from "react";
import { RicosContext } from "./../../ricos-context/index.js";
import styles from "./prompt-input-area-scss.js";
const PromptInputArea = React.forwardRef(
  ({
    busy,
    readonly,
    placeholder,
    maxLength,
    onChange,
    onSubmit,
    value,
    busyValue,
    onCancel,
    zIndex,
    disabled,
    dataHook,
    minRowsAutoGrow = 1,
    maxHeight = "66px",
    errorMessage
  }, ref) => {
    const { t } = useContext(RicosContext);
    const inputRef = React.useRef(null);
    React.useImperativeHandle(ref, () => {
      return {
        focus() {
          inputRef.current?.focus();
        }
      };
    }, []);
    React.useEffect(() => {
      inputRef.current?.calculateComputedRows();
    }, [busy, value]);
    return /* @__PURE__ */ React.createElement(Box, { className: styles.inputWrapper, flexGrow: 1 }, /* @__PURE__ */ React.createElement(FormField, { status: errorMessage ? "error" : void 0, statusMessage: errorMessage }, /* @__PURE__ */ React.createElement(
      InputArea,
      {
        disabled,
        dataHook,
        size: "small",
        autoGrow: true,
        minRowsAutoGrow,
        maxHeight,
        ref: inputRef,
        readOnly: busy || readonly,
        value: busy ? busyValue ?? t("AIPlugin_Input_Loading_Text") : value,
        placeholder: t(placeholder ?? "AIPlugin_Input_Placeholder_Text"),
        onChange: (e) => e.target.value.length > maxLength ? onChange(value) : onChange(e.target.value),
        onKeyDown: (e) => {
          if (e.key === "Escape") {
            if (busy) {
              e.stopPropagation();
              onCancel();
              return;
            }
            if (value) {
              e.stopPropagation();
              onChange("");
              inputRef.current?.calculateComputedRows();
            }
          }
          if (e.key === "Enter" && !busy) {
            onSubmit(value);
            return;
          }
        }
      }
    )), /* @__PURE__ */ React.createElement(
      StatusIndicator,
      {
        busy,
        maxLength,
        valueLength: value.length,
        zIndex
      }
    ));
  }
);
const StatusIndicator = ({
  busy,
  maxLength,
  valueLength,
  zIndex
}) => {
  const { t } = useContext(RicosContext);
  const [showPopover, setShowPopover] = React.useState(false);
  React.useEffect(() => {
    setShowPopover(maxLength === valueLength);
  }, [maxLength, valueLength]);
  if (busy) {
    return /* @__PURE__ */ React.createElement("div", { className: classNames(styles.statusIndicator, styles.statusIndicatorLoader) }, /* @__PURE__ */ React.createElement(Loader, { size: "tiny" }));
  }
  if (valueLength === 0) {
    return null;
  }
  const indicator = maxLength === valueLength ? /* @__PURE__ */ React.createElement(Box, { color: "Y10", className: styles.statusIndicatorWarning }, /* @__PURE__ */ React.createElement(StatusWarningFilled, null)) : null;
  return (
    // oxlint-disable-next-line jsx-a11y/no-static-element-interactions
    /* @__PURE__ */ React.createElement(
      "div",
      {
        className: styles.statusIndicator,
        onMouseEnter: () => setShowPopover(true),
        onMouseLeave: () => setShowPopover(false)
      },
      /* @__PURE__ */ React.createElement(
        Popover,
        {
          moveBy: { y: 6 },
          shown: showPopover,
          appendTo: "window",
          placement: "top",
          theme: "dark",
          zIndex: zIndex + 1
        },
        /* @__PURE__ */ React.createElement(Popover.Element, null, indicator),
        /* @__PURE__ */ React.createElement(Popover.Content, null, /* @__PURE__ */ React.createElement(
          Box,
          {
            paddingTop: "SP1",
            paddingBottom: "SP1",
            paddingLeft: "SP2",
            paddingRight: "SP2",
            direction: "vertical",
            maxWidth: "200px"
          },
          /* @__PURE__ */ React.createElement(Text, { size: "tiny", light: true, weight: "thin" }, t(
            maxLength === valueLength ? "AIPlugin_Characters_Completed_Tooltip_Text" : "AIPlugin_Characters_Tooltip_Text",
            { count: valueLength, limit: maxLength }
          ))
        ))
      )
    )
  );
};
export {
  PromptInputArea
};
//# sourceMappingURL=prompt-input-area.js.map
