import { Plugin } from 'prosemirror-state';
import { Node as PMNode } from 'prosemirror-model';
import { tableEditing, columnResizing, TableView } from 'prosemirror-tables';

/**
 * TableView that also reflects the author's `class`/`id` onto the inner
 * `<table>` element (the base TableView leaves it bare and puts its own class on
 * the wrapper div). The attributes round-trip via the schema's toDOM on export;
 * this makes `table.grid …` style rules match in the live editor too. Passed to
 * `columnResizing` as its `View`, so column resizing keeps working.
 */
class HtmlAttrTableView extends TableView {
  constructor(node: PMNode, defaultCellMinWidth: number) {
    super(node, defaultCellMinWidth);
    this.applyHtmlAttrs(node);
  }

  private applyHtmlAttrs(node: PMNode): void {
    const htmlClass = node.attrs.htmlClass as string | null;
    const htmlId = node.attrs.htmlId as string | null;
    this.table.className = htmlClass ?? '';
    if (htmlId) this.table.id = htmlId;
    else this.table.removeAttribute('id');
  }

  update(node: PMNode): boolean {
    const updated = super.update(node);
    if (updated) this.applyHtmlAttrs(node);
    return updated;
  }
}

/**
 * prosemirror-tables wiring: cell selections, fix-tables normalization, and
 * draggable column resizing (widths persist as `data-colwidth`). The CSS
 * these plugins rely on (.selectedCell, .column-resize-handle, .resize-cursor)
 * is inlined in nile-wysiwyg-editor.css.ts.
 */
export function tablePlugins(): Plugin[] {
  return [
    columnResizing({ View: HtmlAttrTableView }),
    tableEditing({ allowTableNodeSelection: true }),
  ];
}