import React, { useMemo, useState, useCallback } from 'react';
import classnames from 'classnames';
import { faPen } from '@fortawesome/free-solid-svg-icons/faPen';
import { FontAwesomeIcon } from '../font-awesome-icon';
import TextEditorLoader from './text-editor-loader';
import { useNonNativeButtonAttrs } from '../hooks/use-non-native-button-attrs';
import { useTranslation } from '../hooks/use-translation';
import { INLINE_EDITOR_TYPES, EditedText, TextEditor, TEXT_EDITOR_DEFAULT_TOOLS } from '.';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default 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
  } = useTranslation();
  const initialTitle = useMemo(() => header?.title || '', [header?.title]);
  const [titleValue, setTitleValue] = useState(initialTitle);
  const [editorValue, setEditorValue] = useState(initialValue);
  const [isEditMode, setIsEditMode] = useState(autoFocus);
  const showTextEditor = () => setIsEditMode(true);
  const buttonAttrs = useNonNativeButtonAttrs({
    onClick: showTextEditor,
    onKeyDown: showTextEditor
  });
  const handleCancel = useCallback(() => {
    setEditorValue(initialValue);
    setTitleValue(initialTitle);
    setIsEditMode(false);
    if (onCancel) {
      onCancel();
    }
  }, [initialValue, header?.title]);
  const handleSave = useCallback(() => {
    setIsEditMode(false);
    if (onSave) {
      onSave(editorValue, titleValue);
    }
  }, [editorValue, titleValue]);
  function getHeader() {
    return /*#__PURE__*/_jsxs("header", {
      className: "inline-text-editor-header",
      "test-id": "inline-text-editor-header",
      children: [header?.title ? /*#__PURE__*/_jsx("p", {
        className: "inline-text-editor-header-title",
        children: header.title
      }) : /*#__PURE__*/_jsx("p", {
        className: "inline-text-editor-header-title placeholder-title",
        children: header?.titlePlaceholder
      }), /*#__PURE__*/_jsx(FontAwesomeIcon, {
        "test-id": "inline-text-editor-header-button",
        className: "inline-text-editor-header-button",
        icon: faPen
      })]
    });
  }
  const isFlex = type === INLINE_EDITOR_TYPES.FLEX;
  return /*#__PURE__*/_jsx("div", {
    className: classnames('inline-text-editor-wrapper', isFlex && 'is-flex', className),
    "test-id": "inline-text-editor",
    children: /*#__PURE__*/_jsx(TextEditorLoader, {
      children: /*#__PURE__*/_jsx("div", {
        "test-id": "inline-text-editor-element",
        className: classnames('inline-text-editor', !isEditMode && 'is-inline', readOnly && 'read-only'),
        children: isEditMode ? /*#__PURE__*/_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__*/_jsxs("div", {
          "test-id": "inline-text-editor-view-container",
          className: classnames('inline-text-editor-view-container', isFlex && 'is-flex'),
          ...(!readOnly ? buttonAttrs : {}),
          children: [getHeader(), /*#__PURE__*/_jsx(EditedText, {
            value: editorValue,
            placeholder: placeholder,
            testId: "inline-text-editor-read",
            ariaLabel: ariaLabel || titleValue
          })]
        })
      })
    })
  });
}