import _extends from "@babel/runtime/helpers/esm/extends";
import React, { forwardRef, useCallback, useEffect, useRef, useState } from "react";
import classNames from "classnames";
import { EditableContent } from "../EditableContent/EditableContent";
import { StyledDiv, StyledMultilineSpan, StyledTextareaSpan } from "../EditableContent/Styles";
export const EditableText = /*#__PURE__*/forwardRef((_ref, ref) => {
  let {
    onSave,
    onCancel,
    value,
    inputProps,
    allowEmptyString,
    multiline = false,
    variant = "Body 2",
    weight,
    disabled = false,
    invalid,
    wrapRef,
    children,
    ...props
  } = _ref;
  const [currentValue, setCurrentValue] = useState(value);
  const [prevValue, setPrevValue] = useState(value);
  const escapeRef = useRef(false);
  const intTextareaRef = useRef(null);
  useEffect(() => {
    if (currentValue !== value) {
      setCurrentValue(value);
      setPrevValue(value);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [value]);
  const handleBlur = useCallback(e => {
    if (escapeRef.current) {
      setCurrentValue(prevValue);
      escapeRef.current = false;
    } else {
      if (e.target.value.trim().length > 0 && prevValue !== e.target.value) {
        setPrevValue(e.target.value);
        setCurrentValue(e.target.value);
        typeof onSave === "function" && onSave(e);
      } else {
        !allowEmptyString ? setCurrentValue(prevValue) : typeof onSave === "function" && prevValue !== e.target.value && onSave(e);
      }
    }
    // Reset scroll position for textarea
    if (multiline && intTextareaRef != null && intTextareaRef.current) {
      intTextareaRef.current.scrollLeft = 0;
    }
  }, [allowEmptyString, onSave, prevValue, multiline]);
  const handleFocus = useCallback(e => {
    if (multiline) {
      const textarea = e.target;
      const length = textarea.value.length;
      textarea.setSelectionRange(length, length);
    }
  }, [multiline]);
  const handleKeyDown = useCallback(e => {
    if (e.key === "Enter" && !multiline) {
      e.target.blur();
    }
    if (e.key === "Escape") {
      escapeRef.current = true;
      e.target.blur();
      typeof onCancel === "function" && onCancel();
    }
  }, [onCancel, multiline]);
  const handleChange = useCallback(e => {
    setCurrentValue(e.target.value);
  }, []);
  if (multiline) {
    return /*#__PURE__*/React.createElement(StyledDiv, _extends({
      ref: wrapRef
    }, props, {
      $multiline: multiline
    }), /*#__PURE__*/React.createElement(StyledMultilineSpan, {
      variant: variant,
      forwardedAs: "span",
      weight: weight,
      $disabled: disabled,
      invalid: invalid,
      className: "presentation",
      onClick: () => {
        if (!disabled && intTextareaRef.current) {
          intTextareaRef.current.focus();
        }
      }
    }, children ? children : String(currentValue || "").replace(/\n/g, " ")), /*#__PURE__*/React.createElement(StyledTextareaSpan, _extends({
      ref: intTextareaRef,
      forwardedAs: "textarea",
      variant: variant,
      weight: weight,
      value: currentValue != null ? currentValue : "",
      onFocus: handleFocus,
      onBlur: handleBlur,
      onKeyDown: handleKeyDown,
      onChange: handleChange,
      disabled: disabled,
      invalid: invalid,
      "data-form-type": "other",
      placeholder: inputProps == null ? void 0 : inputProps.placeholder,
      className: classNames("c-textarea", inputProps == null ? void 0 : inputProps.className),
      rows: 3
    }, inputProps)));
  }
  return /*#__PURE__*/React.createElement(EditableContent, _extends({}, props, {
    variant: variant,
    weight: weight,
    disabled: disabled,
    invalid: invalid,
    wrapRef: wrapRef,
    ref: ref,
    inputProps: {
      ...inputProps,
      value: currentValue != null ? currentValue : "",
      onBlur: handleBlur,
      onKeyDown: handleKeyDown,
      onChange: handleChange,
      type: "text",
      className: classNames("c-input", inputProps == null ? void 0 : inputProps.className)
    }
  }), children);
});
EditableText.displayName = "EditableText";
//# sourceMappingURL=EditableText.js.map