'use client'

import type { InlineMathDelimiter } from '@admin/utils/editor/inline-math-delimiter'
import type { Node as ProseMirrorNode } from '@tiptap/pm/model'
import { getInlineMathDelimiter } from '@admin/utils/editor/get-inline-math-delimiter'
import { getStringAttr } from '@admin/utils/editor/get-string-attr'
import { renderLatex } from '@admin/utils/editor/render-latex'

export class InlineMathNodeView {
  readonly dom: HTMLElement
  private currentRaw: string
  private currentDelimiter: InlineMathDelimiter
  private node: ProseMirrorNode

  constructor(node: ProseMirrorNode) {
    this.node = node
    this.currentRaw = getStringAttr(node.attrs.raw)
    this.currentDelimiter = getInlineMathDelimiter(node.attrs.delimiter)
    this.dom = document.createElement('span')
    this.dom.dataset.contentEditorInlineMath = ''
    this.dom.contentEditable = 'false'
    this.dom.className = 'content-editor-inline-math rounded-[3px] px-0.5'
    this.render()
  }

  update(node: ProseMirrorNode) {
    if (node.type !== this.node.type) return false

    this.node = node
    const nextRaw = getStringAttr(node.attrs.raw)
    const nextDelimiter = getInlineMathDelimiter(node.attrs.delimiter)

    if (nextRaw !== this.currentRaw || nextDelimiter !== this.currentDelimiter) {
      this.currentRaw = nextRaw
      this.currentDelimiter = nextDelimiter
      this.render()
    }

    return true
  }

  ignoreMutation() {
    return true
  }

  private render() {
    this.dom.dataset.raw = this.currentRaw
    this.dom.dataset.delimiter = this.currentDelimiter
    this.dom.innerHTML = renderLatex(this.currentRaw, false)
  }
}