// fixtures/toolbar.test.mjs — the editor's chrome must not write to the
// DOM when the DOM is already right.
//
// Named for the toolbar because the toolbar's plugin is the entry
// point, but it covers both bars: editor-entry.js gives the whole
// chrome ONE ProseMirror plugin, and the menu bar rides on it through
// createToolbar's onSync. So this file wires them the same way and
// holds one property across both.
//
// THIS FILE EXISTS BECAUSE ITS ABSENCE SHIPPED A VISIBLE FLASH. Driven
// in a real browser with one genuinely hidden tab, switching back to a
// document produced 23 DOM mutations on reveal, 21 of them attribute
// writes on chrome that was already on screen — and recording each
// write's old value against its new one, 21 of 21 were redundant. Zero
// changed anything. Every one restated what was already there:
// aria-pressed "false" -> "false", disabled "" -> "". setAttribute with
// an identical value still invalidates style and still records a
// mutation, and so does setting a reflected boolean property to the
// value it already holds, so the browser spent a frame repainting
// chrome nothing had changed.
//
// The tab switch was only where it became visible. Both bars sync on
// EVERY ProseMirror state update, so this was the cost of every
// keystroke as well; tabbing back merely gathered a page of it into one
// frame. And it grows: the same measurement gave 12 mutations before
// the toolbar redesign and 23 after, because each control added brought
// its own unconditional pair of writes. The menu bar, written after the
// toolbar by a different session, reproduced the defect from scratch —
// which is the argument for holding this against the source and not
// only against the controls that exist today.
//
// So the property is not "few mutations on a tab switch", which is a
// symptom at one moment. It is: AFTER A STATE UPDATE THAT CHANGES
// NOTHING, THE CHROME PERFORMS ZERO WRITES.
//
// No DOM and no browser, the same arrangement menu.test.mjs uses: a
// stand-in for the handful of DOM surface these modules touch, which
// records every write WHETHER OR NOT IT CHANGES ANYTHING. Recording the
// call rather than the change is the entire seam — a check that
// compared the bars before and after would see nothing wrong, because
// nothing IS different afterwards.
import { test } from 'node:test'
import assert from 'node:assert/strict'
import { readFileSync } from 'node:fs'
import { Schema } from 'prosemirror-model'
import { EditorState, TextSelection } from 'prosemirror-state'
import { schema as basic } from 'prosemirror-schema-basic'
import { addListNodes } from 'prosemirror-schema-list'
import { alignedParagraph } from './align.mjs'
import { withIndent } from './indent.mjs'
import { SIZE_MARKS, SIZES } from './sizes.mjs'
import { FONTS } from './fonts.mjs'
import { createToolbar } from './toolbar.mjs'
import { mountMenu } from './menu.mjs'

// toolbar.mjs asks the document which element has focus, so that
// showInCombo can decline to overwrite a filter box somebody is typing
// into; menu.mjs listens on the document for a click-away close. Those
// are the two reaches for a global in these modules, and under Node
// there is nothing to reach for. A stand-in with nothing focused is
// what a chrome syncing while the caret is in the document sees anyway.
globalThis.document = { activeElement: null, addEventListener() {} }

// The schema editor-entry.js builds, assembled the same way from the
// same modules. Written out rather than imported because
// editor-entry.js is a program, not a module surface — it mounts an
// EditorView on import — but every piece of the vocabulary here comes
// from the file that owns it, so the two cannot drift in the parts this
// test reads (the font marks, the size marks, the block types).
function spanMark(cls, group) {
  return {
    group,
    excludes: group,
    parseDOM: [{ tag: 'span.' + cls }],
    toDOM: () => ['span', { class: cls }, 0],
  }
}

const marks = SIZE_MARKS.reduce(
  (spec, mark) => spec.addToStart(mark, spanMark('docs-' + mark.replace('_', '-'), 'fontSize')),
  basic.spec.marks,
)
  .addToStart('font_mono', spanMark('docs-font-mono', 'fontFamily'))
  .addToStart('font_sans', spanMark('docs-font-sans', 'fontFamily'))
  .addToStart('font_serif', spanMark('docs-font-serif', 'fontFamily'))

const nodes = addListNodes(
  basic.spec.nodes
    .update('paragraph', withIndent(alignedParagraph(basic.spec.nodes.get('paragraph')), 'p'))
    .update('heading', withIndent(basic.spec.nodes.get('heading'), 'h1')),
  'paragraph block*',
  'block',
)

const schema = new Schema({ nodes, marks })

// A recording stand-in for the DOM surface the chrome touches.
//
// Every attribute write and every property write goes into one log,
// with its old value beside its new one, whether or not the two differ.
// Nothing here is a DOM implementation and it must not grow into one —
// the moment a test needs layout or real focus it belongs in the
// browser drive (fixtures/browser-drive.mjs).
//
// EVERY property write, through a Proxy, and not just the three this
// file bothered to define accessors for. That distinction was a real
// hole, found in review with a probe planted on menu.mjs's
// every-state-update path:
//
//     if (!name.includes('https://')) el.title = 'seen'
//
// which all three tests passed. `title` is attribute-reflected, so an
// identical-value write invalidates style and records a mutation on
// every keystroke — the exact defect this file exists to stop — and it
// was invisible twice over. The structural check below missed it
// because stripComments does not parse string literals, so the `//`
// inside 'https://' blanked the rest of the line; and this fake missed
// it because an assignment to a property with no accessor landed on a
// plain object without a sound. Two nets, one hole in each, and the
// holes overlapped.
//
// The Proxy closes this one, and closes it for a class rather than for
// a name: el.title, el.textContent, el.className, el.checked,
// el.hidden, el.innerHTML, el['disabled'] written through a computed
// key, and compound forms like `||=` that the structural check's
// bare-`=` shape does not match either. The three accessors stay for
// their semantics — a select refusing a value no option carries — and
// no longer log, because the trap already did.
//
// Two roots, not one, because that is how the page is built: the
// formatting bar is [docs-toolbar] and the menu bar is [estilo-menubar],
// and both hold elements carrying data-docs-command. A single root
// would hand the toolbar the menu's items and test something the
// browser never does.
function makeDOM() {
  const log = []
  const bar = []
  const menu = []

  // `extra` is applied to the raw node BEFORE the Proxy wraps it: the
  // fixture's own setup (a select's options, its combobox wrapper) is
  // not a write by the code under test and must not be logged as one.
  function element(tag, id, attrs, into, extra = {}) {
    const own = { ...attrs }
    let disabled = 'disabled' in own
    let tabIndex = 'tabindex' in own ? Number(own.tabindex) : -1
    let value = ''
    const node = {
      tag,
      id,
      options: [],
      selectedIndex: -1,
      children: [],
      previousElementSibling: null,
      getAttribute: (k) => (k in own ? own[k] : null),
      hasAttribute: (k) => k in own,
      setAttribute(k, v) {
        log.push({ id, name: k, from: node.getAttribute(k), to: String(v) })
        own[k] = String(v)
      },
      removeAttribute(k) {
        log.push({ id, name: k, from: node.getAttribute(k), to: null })
        delete own[k]
      },
      // Two selector forms, which is all these modules use: a bare tag
      // name, and one or more [attribute] clauses that must all match.
      matches(sel) {
        if (sel === tag) return true
        const parts = sel.match(/\[[^\]]+\]/g)
        return parts ? parts.every((p) => p.slice(1, -1) in own) : false
      },
      querySelector: (sel) => node.children.find((c) => c.matches(sel)) || null,
      querySelectorAll: (sel) => node.children.filter((c) => c.matches(sel)),
      closest: () => null,
      addEventListener() {},
      focus() {},
    }
    // The three properties that are not plain storage. They keep their
    // accessors for the behaviour, and do no logging of their own — the
    // Proxy below logs every write, these included, so a value here
    // would be counted twice.
    Object.defineProperty(node, 'disabled', {
      get: () => disabled,
      set: (v) => {
        disabled = v
      },
    })
    Object.defineProperty(node, 'tabIndex', {
      get: () => tabIndex,
      set: (v) => {
        tabIndex = v
      },
    })
    Object.defineProperty(node, 'value', {
      get: () => value,
      set: (v) => {
        // A real <select> refuses a value no option carries and reports
        // "" afterwards. Emulated because it is the one way a write
        // guarded by a comparison can still fire on every update, and a
        // fake that quietly accepted any string would hide it.
        //
        // selectedIndex is moved on the raw node, not through the
        // Proxy: it is a consequence of this write, not a second one.
        if (tag === 'select') {
          const at = node.options.findIndex((o) => o.value === String(v))
          node.selectedIndex = at
          value = at < 0 ? '' : String(v)
        } else {
          value = String(v)
        }
      },
    })
    Object.assign(node, extra)

    const el = new Proxy(node, {
      set(target, key, v) {
        log.push({ id, name: String(key), from: target[key], to: v })
        target[key] = v
        return true
      },
    })
    into.push(el)
    return el
  }

  // views/show.html renders every control disabled, and the toolbar
  // buttons with aria-pressed="false" except undo and redo, which have
  // no pressed state to render. Reproduced exactly: what the first sync
  // has to change depends on it.
  function button(name, pressed = true) {
    return element(
      'button',
      name,
      {
        'data-docs-command': name,
        tabindex: '-1',
        disabled: '',
        ...(pressed ? { 'aria-pressed': 'false' } : {}),
      },
      bar,
    )
  }

  // A select as ui/select.js leaves it: the native control still there,
  // with the enhancement's [rst-combo] wrapper inserted immediately
  // before it, holding the text input a person actually uses.
  function selectControl(kind, options) {
    const wrap = element('div', kind + '-wrap', { 'rst-combo': '' }, bar)
    const input = element('input', kind + '-combo', { tabindex: '-1', disabled: '' }, bar)
    wrap.children.push(input)
    return element(
      'select',
      'docs-select-' + kind,
      {
        'data-docs-select': kind,
        'aria-label': 'The ' + kind + ' control',
        tabindex: '-1',
        disabled: '',
      },
      bar,
      {
        previousElementSibling: wrap,
        options: options.map(([value, text]) => ({ value: String(value), text })),
      },
    )
  }

  // A menu row, as menu.go renders it: disabled from the server, and
  // named by the same data-docs-command vocabulary the toolbar uses.
  function menuItem(name, extra = {}) {
    return element(
      'button',
      'menu-' + name,
      { 'estilo-menu-item': '', 'data-docs-command': name, disabled: '', ...extra },
      menu,
    )
  }

  button('undo', false)
  button('redo', false)
  selectControl('block', [
    ['paragraph', 'Paragraph'],
    ['heading-1', 'Heading 1'],
    ['heading-2', 'Heading 2'],
    ['heading-3', 'Heading 3'],
  ])
  selectControl(
    'font',
    FONTS.map((f) => [f, f[0].toUpperCase() + f.slice(1)]),
  )
  selectControl(
    'size',
    SIZES.map((pt) => [pt, String(pt)]),
  )
  for (const name of ['strong', 'em', 'code']) button(name)
  for (const name of ['align_left', 'align_center', 'align_right']) button(name)
  for (const name of ['bullet_list', 'ordered_list', 'blockquote']) button(name)

  // The menu bar. One title, because the roving tabindex needs at least
  // one and this file is not testing the roving; and the three shapes
  // of row that reach different lines of menu.mjs's sync — an editor
  // command, a LOCAL_COMMANDS one (Print, available whenever the page
  // is), and a checkable one, whose aria-pressed sync also writes.
  element('summary', 'menu-title', { 'estilo-menubar-title': '', tabindex: '-1' }, menu)
  menuItem('strong')
  menuItem('undo')
  menuItem('clear_formatting')
  menuItem('print')
  menuItem('block_paragraph', { 'aria-pressed': 'false' })
  menuItem('block_heading-1', { 'aria-pressed': 'false' })

  function rootOver(list) {
    return {
      addEventListener() {},
      contains: (el) => list.includes(el),
      querySelector: (sel) => list.find((n) => n.matches(sel)) || null,
      querySelectorAll: (sel) => list.filter((n) => n.matches(sel)),
    }
  }

  const everything = () => bar.concat(menu)

  return {
    toolbarRoot: rootOver(bar),
    menuRoot: rootOver(menu),
    log,
    byId: (id) => everything().find((n) => n.id === id),
    writesTo: (id, name) => log.filter((w) => w.id === id && w.name === name).map((w) => w.to),
  }
}

// Both bars, wired exactly as editor-entry.js wires them: ONE plugin,
// the toolbar's, with the menu riding on its onSync. `menu` is assigned
// after createToolbar and read through a closure, which is what lets
// the very first sync reach it — the same shape editor-entry.js has,
// and worth copying rather than tidying, because a menu mounted before
// the toolbar would be driven by a code path the browser never takes.
//
// The view is a stand-in. sync reads view.state and hands the view on
// to commands called with a null dispatch, which is a contract every
// command in the table honours (buildCommands' own comment has the
// evening that cost).
function mount(state) {
  const dom = makeDOM()
  const view = { state, focus() {}, dispatch() {} }
  let menu = null
  const toolbar = createToolbar({
    root: dom.toolbarRoot,
    schema,
    getView: () => view,
    onSync: (v) => {
      if (menu) menu.sync(v)
    },
  })
  menu = mountMenu(dom.menuRoot, {
    getView: () => view,
    commands: toolbar.commands,
    isPressed: (name, v) => toolbar.isPressed(v.state, name),
  })
  assert.ok(menu, 'the menu bar should have mounted')
  const pluginView = toolbar.plugin.spec.view(view)
  return {
    dom,
    to(next) {
      view.state = next
      pluginView.update(view)
    },
  }
}

// A document in a monospace 24pt italic heading, with the selection
// across it — several of the chrome's controls saying something
// different from what they say over an empty paragraph.
function headingState() {
  const text = schema.text('Title', [
    schema.marks.em.create(),
    schema.marks.font_mono.create(),
    schema.marks.size_24.create(),
  ])
  const doc = schema.node('doc', null, [schema.node('heading', { level: 1 }, [text])])
  return EditorState.create({ doc, selection: TextSelection.create(doc, 1, 6) })
}

test('a state update that changes nothing writes nothing to the chrome', () => {
  const state = EditorState.create({ schema })
  const bar = mount(state)

  // The mount itself must write: the chrome arrives disabled and
  // unpressed and the first sync is what turns it on. Asserted, on both
  // bars, so this test cannot pass by the recorder seeing nothing at
  // all, or by one of the two bars never having been driven.
  assert.ok(bar.dom.log.length > 0, 'the first sync should have written to the chrome')
  assert.equal(bar.dom.byId('strong').disabled, false)
  assert.equal(bar.dom.byId('menu-strong').disabled, false)
  assert.equal(bar.dom.byId('menu-print').disabled, false)
  // The current paragraph style is checked and enabled.
  assert.equal(bar.dom.byId('menu-block_paragraph').getAttribute('aria-pressed'), 'true')
  assert.equal(bar.dom.byId('menu-block_paragraph').disabled, false)

  bar.dom.log.length = 0

  // An empty transaction: a new EditorState with the same document, the
  // same selection and the same stored marks. ProseMirror delivers one
  // of these for every meta-only change — and delivers a whole run of
  // updates whose visible answer is identical while somebody types.
  bar.to(state.apply(state.tr))

  assert.deepEqual(bar.dom.log, [])
})

test('a state update that changes something still writes it', () => {
  // The counterweight to the test above, which "write nothing, ever"
  // would also pass. Whatever the chrome stops writing, it must go on
  // writing everything a person can see change.
  const bar = mount(EditorState.create({ schema }))
  bar.dom.log.length = 0
  bar.to(headingState())

  assert.deepEqual(bar.dom.writesTo('em', 'aria-pressed'), ['true'])
  // And the menu's check column moves with the selection.
  assert.deepEqual(bar.dom.writesTo('menu-block_heading-1', 'aria-pressed'), ['true'])
  assert.deepEqual(bar.dom.writesTo('menu-block_paragraph', 'aria-pressed'), ['false'])
  assert.deepEqual(bar.dom.writesTo('docs-select-block', 'value'), ['heading-1'])
  assert.deepEqual(bar.dom.writesTo('docs-select-font', 'value'), ['mono'])
  assert.deepEqual(bar.dom.writesTo('docs-select-size', 'value'), ['24'])
  // The combobox is the control a person actually reads. select.value
  // moves no pixel on its own — see showInCombo.
  assert.deepEqual(bar.dom.writesTo('block-combo', 'value'), ['Heading 1'])
  assert.deepEqual(bar.dom.writesTo('font-combo', 'value'), ['Mono'])
  assert.deepEqual(bar.dom.writesTo('size-combo', 'value'), ['24'])
  // The menu bar too: Clear formatting has nothing to strip over an
  // empty selection and becomes available once there is one.
  assert.deepEqual(bar.dom.writesTo('menu-clear_formatting', 'disabled'), [false])

  // And the chrome afterwards says so, which is the thing the redundant
  // writes were never changing.
  assert.equal(bar.dom.byId('em').getAttribute('aria-pressed'), 'true')
  assert.equal(bar.dom.byId('strong').getAttribute('aria-pressed'), 'false')
  assert.equal(bar.dom.byId('docs-select-block').value, 'heading-1')
  assert.equal(bar.dom.byId('size-combo').value, '24')
  assert.equal(bar.dom.byId('menu-clear_formatting').disabled, false)
})

// The two tests above drive the controls views/show.html renders today.
// A control added later that this fake does not carry would slip past
// them — which is the failure mode that took the count from 12 to 23,
// and then reproduced the whole defect in a second module. So the rule
// is held against the source as well: neither bar writes to the DOM
// directly. Every write goes through fixtures/dom-writes.mjs.
//
// Two named files rather than a rule over every module that touches the
// DOM, deliberately. Plenty of modules here write to elements and
// should — pages.mjs stamps page numbers, wordcount.mjs writes a count,
// jump-to.mjs builds a palette — and none of them runs on every editor
// state update. These two do, both from the one plugin, which is what
// makes a redundant write here cost a frame. Add a third surface to
// that plugin and add it to this list.
//
// THIS CHECK IS THE SECOND NET, NOT THE FIRST. It reads text, and a
// text rule over JavaScript is approximate in a way the recording fake
// is not: the stripper below does not parse string literals, so a `//`
// inside a string blanks the rest of that line and any write after it
// on the same line becomes invisible here. That is a false PASS, not
// merely a false positive, and it was found in review by a probe that
// hid a write behind 'https://' — see makeDOM's own header. The fake's
// Proxy is what catches that class; this check earns its place on a
// different one, the control added later that the fake does not carry.
// Neither is sufficient alone.
const GUARDED = ['toolbar.mjs', 'menu.mjs']

const WRITE =
  /\.(?:setAttribute|removeAttribute)\s*\(|\.(?:disabled|value|checked|textContent|innerHTML|className|tabIndex|hidden|title)[ \t]*=(?!=)/g

// Comments go to spaces rather than away, so offsets and line numbers
// still point at the real file. Both modules' comments discuss the very
// writes being looked for, at length and by name.
//
// It handles // and /* */ and nothing else — in particular it does not
// know a string literal from code, which is the hole described above.
// Left as it is deliberately: a stripper that got strings, template
// literals and regex literals right would be a small parser, and the
// recording fake already covers what this misses.
function stripComments(src) {
  let out = ''
  let i = 0
  while (i < src.length) {
    if (src.startsWith('//', i)) {
      while (i < src.length && src[i] !== '\n') {
        out += ' '
        i++
      }
    } else if (src.startsWith('/*', i)) {
      const end = src.indexOf('*/', i + 2)
      const stop = end < 0 ? src.length : end + 2
      for (; i < stop; i++) out += src[i] === '\n' ? '\n' : ' '
    } else {
      out += src[i]
      i++
    }
  }
  return out
}

function sourceOf(file) {
  return stripComments(readFileSync(new URL('./' + file, import.meta.url), 'utf8'))
}

test('no DOM write in either bar bypasses dom-writes.mjs', () => {
  for (const file of GUARDED) {
    const code = sourceOf(file)
    // ok() rather than match(): a failing match() prints the whole
    // stripped module, which buries the one line that matters.
    assert.ok(
      code.includes("from './dom-writes.mjs'"),
      `${file} should get its writers from dom-writes.mjs`,
    )
    const stray = []
    for (const m of code.matchAll(WRITE)) {
      stray.push(
        `${file}:${code.slice(0, m.index).split('\n').length}: ${code
          .slice(m.index, m.index + 40)
          .trim()}`,
      )
    }
    assert.deepEqual(stray, [])
  }
})