import { UpdateCursorPositionAction } from '../../dto/actions/update-cursor-position-action';
import { VegaRTEExtensionRenderer } from '../base-extension-renderer';
/**
 * Token node renderer for the rich text editor.
 */
export class RTETokenNodeRenderer extends VegaRTEExtensionRenderer {
  /**
   * Renders the token node as a DOM element.
   *
   * @param {VegaRTECreateElementFunction} createElement - The function to create a DOM element.
   * @param {RTETokenNode} node - The token node to render.
   * @param {RTERenderContext} editorContent - The editor content context.
   * @returns {VegaRTERenderResult} - The rendered DOM element.
   */
  doRender(createElement, node, editorContent) {
    const { id, token } = node;
    return createElement('span', Object.assign(Object.assign({ 'key': id, 'template-token-key': token, 'token-key': token, 'contenteditable': 'false', 'style': node.getStyles(), 'class': `token ${node.getClasses()}` }, this.additionalAttributes(node)), { 'ref': this.useRef(node), 
      // eslint-disable-next-line jsdoc/require-jsdoc
      'onClick': (event) => {
        event.preventDefault();
        if (editorContent && editorContent.editable !== false) {
          this.handleTokenElementClick(event, node, editorContent.host);
        }
      } }), node.text);
  }
  /**
   * Override to inject RTE scope styles for the token node.
   *
   * @returns {string} The CSS styles for the token node.
   */
  injectRTEScopeStyles() {
    return `span[token-key]{padding: 0 2px; margin: 0 1px; background-color: rgba(var(--v-bg-status-info, 205,209,211))}`;
  }
  /**
   * Handle the click event on the token element.
   *
   * @typedef HTMLVegaRichTextEditorElement - The type definition for the rich text editor host element.
   * @param {MouseEvent} event - The click event.
   * @param {RTETokenNode} node - The token node that was clicked.
   * @param {HTMLVegaRichTextEditorElement} [richTextEditor] - The rich text editor host element.
   */
  handleTokenElementClick(event, node, richTextEditor) {
    event.preventDefault();
    if (richTextEditor) {
      richTextEditor.value.apply(new UpdateCursorPositionAction(node, undefined, true));
    }
  }
  /**
   * Additional attributes for the token node.
   *
   * @param {RTETokenNode} node - The token node.
   * @returns {Record<string, string>} Additional attributes
   */
  additionalAttributes(node) {
    const annotation = node.getCustomAttributesAnnotation();
    let result = { wrapped: 'true' };
    if (annotation) {
      result = Object.assign(Object.assign({}, result), annotation.render());
    }
    return result;
  }
}
