import { ACTIVE_TABLE_CELL_CLASS } from '@admin/utils/editor/active-table-cell-class'
import { Extension } from '@tiptap/core'
import { Plugin, PluginKey } from '@tiptap/pm/state'
import { cellAround, findTable } from '@tiptap/pm/tables'
import { Decoration, DecorationSet } from '@tiptap/pm/view'

export const ActiveTableCell = Extension.create({
  name: 'contentEditorActiveTableCell',

  addProseMirrorPlugins() {
    return [
      new Plugin({
        key: new PluginKey('contentEditorActiveTableCell'),
        props: {
          decorations(state) {
            if (!findTable(state.selection.$from)) {
              return null
            }

            const cell = cellAround(state.selection.$from)
            if (!cell) return null

            const cellNode = state.doc.nodeAt(cell.pos)
            if (!cellNode) return null

            return DecorationSet.create(state.doc, [
              Decoration.node(cell.pos, cell.pos + cellNode.nodeSize, {
                class: ACTIVE_TABLE_CELL_CLASS
              })
            ])
          }
        }
      })
    ]
  }
})