import React, { useCallback, useContext } from 'react';
import { Editor } from 'slate';
import classNames from 'classnames';
import TextEditorContext from './text-editor-context';
import { BLOCK_TYPES, MARK_TYPES } from './text-editor-constants';
import { jsx as _jsx } from "react/jsx-runtime";
export const Element = ({
  attributes,
  children,
  element
}) => {
  switch (element.type) {
    case BLOCK_TYPES.HEADLINE_LARGE:
      return /*#__PURE__*/_jsx("p", {
        ...attributes,
        className: "large-text-header",
        "test-id": "large-text",
        children: children
      });
    case BLOCK_TYPES.HEADLINE_MEDIUM:
      return /*#__PURE__*/_jsx("p", {
        ...attributes,
        className: "medium-text-header",
        "test-id": "medium-text",
        children: children
      });
    case BLOCK_TYPES.HEADLINE_SMALL:
      return /*#__PURE__*/_jsx("p", {
        ...attributes,
        className: "small-text-header",
        "test-id": "small-text",
        children: children
      });
    case BLOCK_TYPES.BULLETED_LIST:
      return /*#__PURE__*/_jsx("ul", {
        ...attributes,
        className: "list",
        "test-id": "bulleted-list",
        children: children
      });
    case BLOCK_TYPES.NUMBERED_LIST:
      return /*#__PURE__*/_jsx("ol", {
        ...attributes,
        className: "list",
        "test-id": "numbered-list",
        children: children
      });
    case BLOCK_TYPES.LIST_ITEM:
      return /*#__PURE__*/_jsx("li", {
        ...attributes,
        children: children
      });
    case BLOCK_TYPES.LINK:
      return /*#__PURE__*/_jsx("a", {
        ...attributes,
        target: "_blank",
        rel: "noreferrer",
        className: "anchor r-link",
        href: element.url,
        "test-id": "anchor-link",
        children: children
      });
    case BLOCK_TYPES.CODE:
      return /*#__PURE__*/_jsx("p", {
        className: "code-block",
        "test-id": "code-block",
        children: /*#__PURE__*/_jsx("code", {
          children: children
        })
      });
    default:
      return /*#__PURE__*/_jsx("p", {
        ...attributes,
        className: "regular-text",
        "test-id": "regular-text-content",
        children: children
      });
  }
};
export const Leaf = ({
  attributes,
  children,
  leaf
}) => {
  let node = children;
  if (leaf[MARK_TYPES.BOLD]) {
    node = /*#__PURE__*/_jsx("span", {
      className: "bold",
      "test-id": "bold-text",
      children: node
    });
  }
  if (leaf[MARK_TYPES.ITALIC]) {
    node = /*#__PURE__*/_jsx("span", {
      className: "italic",
      "test-id": "italic-text",
      children: node
    });
  }
  if (leaf[MARK_TYPES.UNDERLINE]) {
    node = /*#__PURE__*/_jsx("span", {
      className: "underlined",
      "test-id": "underlined-text",
      children: node
    });
  }
  if (leaf[MARK_TYPES.SUPERSCRIPT]) {
    node = /*#__PURE__*/_jsx("span", {
      className: "superscript",
      "test-id": "superscript-text",
      children: node
    });
  }
  return /*#__PURE__*/_jsx("span", {
    ...attributes,
    children: node
  });
};
export const Placeholder = ({
  attributes,
  children
}) => {
  // Slate.js overwrites the default opacity to 0.33 within the style prop, omit it here
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const {
    opacity,
    ...restStyle
  } = attributes.style;
  const overwriteAttributes = {
    ...attributes,
    style: restStyle
  };
  return /*#__PURE__*/_jsx("span", {
    ...overwriteAttributes,
    className: "placeholder-text",
    "test-id": "placeholder-text",
    children: children
  });
};
export default function TextEditorContent({
  ariaAttrs,
  testId = 'text-editor-content',
  placeholder = '',
  readOnly = false,
  autoFocus = true,
  isScrollable = true,
  elementRender = Element,
  leafRender = Leaf,
  onBlur = () => {},
  onFocus = () => {},
  maxLength
}) {
  const {
    slateReact
  } = useContext(TextEditorContext);
  const {
    Editable,
    useSlate
  } = slateReact;
  const editor = useSlate();
  const ElementNode = elementRender;
  const LeafNode = leafRender;

  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-expect-error
  const renderElement = useCallback(props => /*#__PURE__*/_jsx(ElementNode, {
    ...props
  }), []);
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-expect-error
  const renderLeaf = useCallback(props => /*#__PURE__*/_jsx(LeafNode, {
    ...props
  }), []);
  const renderPlaceholder = useCallback(
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-expect-error
  props => /*#__PURE__*/_jsx(Placeholder, {
    ...props
  }), []);
  return /*#__PURE__*/_jsx("div", {
    className: classNames('text-editor-content', {
      'is-scrollable': isScrollable
    }),
    "test-id": testId,
    children: /*#__PURE__*/_jsx(Editable, {
      className: "slate-content-editable",
      autoFocus: autoFocus,
      readOnly: readOnly,
      placeholder: placeholder,
      renderPlaceholder: renderPlaceholder,
      renderElement: renderElement,
      renderLeaf: renderLeaf,
      onBlur: onBlur,
      onFocus: onFocus,
      onDOMBeforeInput: event => {
        // NOTE: copy-paste events handled in withMaxLength() plugin because Slate under some
        // circumstances stops triggering onDOMBeforeInput event for copy-paste ¯\_(ツ)_/¯

        // no need to do any calculations if maxLength is not set or if it's a delete event
        if (maxLength && !event.inputType.startsWith('delete')) {
          const currentTextLength = Editor.string(editor, []).length;
          let newText = '';
          if (!!event.data) {
            newText = event.data;
          }
          if (currentTextLength + newText.length > maxLength) {
            event.preventDefault();
          }
        }
      },
      ...ariaAttrs
    })
  });
}