"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = InlineTextEditor;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _faPen = require("@fortawesome/free-solid-svg-icons/faPen");
var _fontAwesomeIcon = require("../font-awesome-icon");
var _textEditorLoader = _interopRequireDefault(require("./text-editor-loader"));
var _useNonNativeButtonAttrs = require("../hooks/use-non-native-button-attrs");
var _useTranslation = require("../hooks/use-translation");
var _ = require(".");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function InlineTextEditor({
  name,
  type,
  readOnly,
  initialValue,
  placeholder,
  ariaLabel,
  className = '',
  enabledTools = _.TEXT_EDITOR_DEFAULT_TOOLS,
  header,
  toolbarPosition,
  height,
  onCancel,
  onSave,
  autoFocus = false,
  deleteEditorContentButtonAriaLabel,
  maxLength,
  getCharactersCounterString
}) {
  const {
    t
  } = (0, _useTranslation.useTranslation)();
  const initialTitle = (0, _react.useMemo)(() => header?.title || '', [header?.title]);
  const [titleValue, setTitleValue] = (0, _react.useState)(initialTitle);
  const [editorValue, setEditorValue] = (0, _react.useState)(initialValue);
  const [isEditMode, setIsEditMode] = (0, _react.useState)(autoFocus);
  const showTextEditor = () => setIsEditMode(true);
  const buttonAttrs = (0, _useNonNativeButtonAttrs.useNonNativeButtonAttrs)({
    onClick: showTextEditor,
    onKeyDown: showTextEditor
  });
  const handleCancel = (0, _react.useCallback)(() => {
    setEditorValue(initialValue);
    setTitleValue(initialTitle);
    setIsEditMode(false);
    if (onCancel) {
      onCancel();
    }
  }, [initialValue, header?.title]);
  const handleSave = (0, _react.useCallback)(() => {
    setIsEditMode(false);
    if (onSave) {
      onSave(editorValue, titleValue);
    }
  }, [editorValue, titleValue]);
  function getHeader() {
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("header", {
      className: "inline-text-editor-header",
      "test-id": "inline-text-editor-header",
      children: [header?.title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
        className: "inline-text-editor-header-title",
        children: header.title
      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
        className: "inline-text-editor-header-title placeholder-title",
        children: header?.titlePlaceholder
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
        "test-id": "inline-text-editor-header-button",
        className: "inline-text-editor-header-button",
        icon: _faPen.faPen
      })]
    });
  }
  const isFlex = type === _.INLINE_EDITOR_TYPES.FLEX;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: (0, _classnames.default)('inline-text-editor-wrapper', isFlex && 'is-flex', className),
    "test-id": "inline-text-editor",
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_textEditorLoader.default, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        "test-id": "inline-text-editor-element",
        className: (0, _classnames.default)('inline-text-editor', !isEditMode && 'is-inline', readOnly && 'read-only'),
        children: isEditMode ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_.TextEditor, {
          type: type,
          name: name,
          header: {
            ...header,
            title: titleValue,
            onChangeTitle: setTitleValue
          },
          autoFocus: true,
          placeholder: placeholder,
          enabledTools: enabledTools,
          value: editorValue,
          toolbarPosition: toolbarPosition,
          onChange: setEditorValue,
          onCancel: handleCancel,
          onSave: handleSave,
          height: height,
          testId: "inline-text-editor-edit",
          contentAriaLabel: ariaLabel || titleValue,
          deleteEditorContentButtonAriaLabel: deleteEditorContentButtonAriaLabel ?? t('Delete Editor Content'),
          maxLength: maxLength,
          getCharactersCounterString: getCharactersCounterString
        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          "test-id": "inline-text-editor-view-container",
          className: (0, _classnames.default)('inline-text-editor-view-container', isFlex && 'is-flex'),
          ...(!readOnly ? buttonAttrs : {}),
          children: [getHeader(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.EditedText, {
            value: editorValue,
            placeholder: placeholder,
            testId: "inline-text-editor-read",
            ariaLabel: ariaLabel || titleValue
          })]
        })
      })
    })
  });
}