import type { TablePart } from '@admin/utils/editor/table-part'
import type { Editor } from '@tiptap/core'
import { ACTIVE_TABLE_CELL_CLASS } from '@admin/utils/editor/active-table-cell-class'
import { clearTablePartPreview } from '@admin/utils/editor/clear-table-part-preview'
import { getMountedEditorView } from '@admin/utils/editor/editor-view'
import { TABLE_PART_PREVIEW_CLASS } from '@admin/utils/editor/table-part-preview-class'
import { selectedRect } from '@tiptap/pm/tables'

export function showTablePartPreview(editor: Editor | null, part: TablePart) {
  clearTablePartPreview(editor)
  const view = getMountedEditorView(editor)
  if (!editor || !view) return

  const activeCell = view.dom.querySelector(`.${ACTIVE_TABLE_CELL_CLASS}`)
  if (activeCell instanceof HTMLTableCellElement) {
    if (part === 'row') {
      activeCell.parentElement?.querySelectorAll('th, td').forEach((cell) => {
        cell.classList.add(TABLE_PART_PREVIEW_CLASS)
      })
      return
    }

    const table = activeCell.closest('table')
    const columnIndex = activeCell.cellIndex
    if (table) {
      Array.from(table.rows).forEach((row) => {
        row.cells[columnIndex]?.classList.add(TABLE_PART_PREVIEW_CLASS)
      })
      return
    }
  }

  try {
    const rect = selectedRect(editor.state)
    const positions =
      part === 'row'
        ? rect.map.cellsInRect({
            bottom: rect.top + 1,
            left: 0,
            right: rect.map.width,
            top: rect.top
          })
        : rect.map.cellsInRect({
            bottom: rect.map.height,
            left: rect.left,
            right: rect.left + 1,
            top: 0
          })

    for (const position of new Set(positions)) {
      const cell = view.nodeDOM(rect.tableStart + position)
      if (cell instanceof HTMLTableCellElement) {
        cell.classList.add(TABLE_PART_PREVIEW_CLASS)
      }
    }
  } catch {
    clearTablePartPreview(editor)
  }
}