import { VegaRTEExtensionRenderer } from '../../base-extension-renderer';
import { findParent } from '../../../../../utils/ui';
/**
 * Renders a table cell block in the rich text editor.
 */
export class RTETableCellRenderer extends VegaRTEExtensionRenderer {
  /**
   * @inheritDoc
   */
  doRender(h, renderData, rteContext) {
    return this.renderByCellType(h, renderData, rteContext, 'td');
  }
  /**
   * Renders the table cell based on its type (td or th).
   *
   * @param {VegaRTECreateElementFunction} h - The create element function.
   * @param {RTETableCellBlock} renderData - The table cell block to render.
   * @param {RTERenderContext} rteContext - The rte editor context.
   * @param {'td' | 'th'} elementType - The type of table cell element ('td' or 'th').
   * @returns {VegaRTERenderResult} - The rendered table cell element.
   */
  renderByCellType(h, renderData, rteContext, elementType) {
    var _a;
    return h(elementType, Object.assign(Object.assign(Object.assign({ key: `${renderData.id}-${elementType}`, 
      // eslint-disable-next-line jsdoc/require-jsdoc
      ref: this.useRef(renderData) }, (_a = renderData.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.render()), { style: renderData.getStyles(rteContext), class: renderData.getClasses() }), (rteContext.editable ? this.onSelectionListeners(renderData, rteContext) : undefined)));
  }
  /**
   * Returns the mouse event listeners for selection handling.
   *
   * @param {RTETableCellBlock} renderData - The table cell block to render.
   * @param {RTERenderContext} rteContext - The rte editor context.
   * @returns {RTETableSelectionListenersType} - The mouse event listeners.
   */
  onSelectionListeners(renderData, rteContext) {
    return {
      /**
       * Handles the mouse down event to focus a cell.
       *
       * @param {MouseEvent} event - The mouse event.
       */
      onMouseDown: (event) => {
        const targetParentTable = findParent(event.target, 'table');
        const currentTable = findParent(event.currentTarget, 'table');
        const inCurrentTable = currentTable === targetParentTable;
        const cellRef = event.target.closest('td, th');
        if (inCurrentTable && cellRef) {
          const extensionContext = this.getExtensionContext(rteContext.host);
          extensionContext && extensionContext.tableSelection.focusCell(cellRef);
        }
      },
      /**
       * Handles the mouse move event to start selection.
       *
       * @param {MouseEvent} event - The mouse event.
       */
      onMouseMove: (event) => {
        event.stopPropagation();
        event.preventDefault();
        const extensionContext = this.getExtensionContext(rteContext.host);
        extensionContext && extensionContext.tableSelection.dragOver(renderData);
      },
      /**
       * Handles the mouse up event to end selection.
       */
      onMouseUp: () => {
        const extensionContext = this.getExtensionContext(rteContext.host);
        extensionContext && extensionContext.tableSelection.endDrag();
      },
    };
  }
}
