import React, { useContext } from 'react';
import { faTrashCan } from '@fortawesome/free-solid-svg-icons/faTrashCan';
import { useTranslation } from '../hooks/use-translation';
import { ACCENT_TYPES, Button } from '../button';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { HEADER_TITLE_MAX_LENGTH } from './text-editor-constants';
import TextEditorContext from './text-editor-context';
import TextEditorService from './text-editor-service';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function TextEditorHeader({
  title = '',
  titlePlaceholder = '',
  isEditable = true,
  maxLength = HEADER_TITLE_MAX_LENGTH,
  onChangeTitle = () => {},
  onDelete = () => {},
  hasDeleteButton = true,
  deleteEditorContentButtonAriaLabel,
  inputAriaLabel
}) {
  const {
    t
  } = useTranslation();
  const {
    slate,
    slateReact
  } = useContext(TextEditorContext);
  const {
    ReactEditor
  } = slateReact;
  const textEditorService = new TextEditorService(slate, slateReact);
  const editor = slateReact.useSlate();
  const hasReadOnlyTitle = title && !isEditable;
  const hasEditableTitle = isEditable && onChangeTitle;
  return /*#__PURE__*/_jsx("header", {
    className: "text-editor-header",
    "test-id": "text-editor-header",
    children: /*#__PURE__*/_jsxs("div", {
      className: "text-editor-header-content",
      children: [hasReadOnlyTitle && /*#__PURE__*/_jsx("p", {
        className: "text-editor-header-title",
        children: title
      }), hasEditableTitle && /*#__PURE__*/_jsx("input", {
        type: "text",
        value: title,
        maxLength: maxLength,
        placeholder: titlePlaceholder,
        className: "text-editor-header-title",
        "test-id": "text-editor-header-title-input",
        onChange: newTitle => {
          onChangeTitle(newTitle.target.value);
        },
        "aria-label": inputAriaLabel
      }), hasDeleteButton && /*#__PURE__*/_jsx(Button, {
        onClick: () => {
          textEditorService.deleteContent(editor);
          ReactEditor.focus(editor);
          onChangeTitle('');
          onDelete();
        },
        accentType: ACCENT_TYPES.ROUND_ICON,
        tooltipText: t('Delete'),
        className: "text-editor-header-delete",
        testId: "text-editor-header-delete",
        "aria-label": deleteEditorContentButtonAriaLabel,
        children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
          icon: faTrashCan
        })
      })]
    })
  });
}