import { mount } from "@vue/test-utils"
import { describe, expect, it } from "vitest"
import { defineComponent, h, ref, watch } from "vue"

// ── Root cause ──
//
// defineModel compiles to useModel(props, "content", options).
// In Vue 3.5, useModel enters "local mode" when no parent provides
// an onUpdate:content listener. The local ref initialises as
// undefined, NOT from props.content.
//
// VTU's mount(Editor, { props: { content: "Hello" } }) sets the
// prop but does not supply a synthetic onUpdate:content listener
// in a way that useModel recognises, so the immediate watcher
// fires with undefined and blocks stay empty.
//
// The HTML output confirms the issue:
//   <div class="editor-shell"><!--v-if--></div>
//   <div data-test="zone"></div>
//   <div data-test="menu" ...></div>
//
// The v-for loop over blocks is an empty fragment (<!--v-if-->).
//
// ── Current status (2026-06-17) ──
//
// Providing "onUpdate:content": vi.fn() alongside the content prop
// does NOT resolve the issue — useModel still enters local mode.
// The fix likely requires investigation of how Vue 3.5.34's useModel
// detects the onUpdate:X listener in the vnode props, and whether
// VTU 2.4.10 passes it through correctly.
//
// Until then, Editor.vue mount tests are written at the composable
// level (useKeyboard, useSlashGroups, useMentionGroups), which
// cover the orchestration logic without VTU's mounting layer.

describe("defineModel — local mode in Vue 3.5", () => {
  it("manual ref + watch on props.content works (demonstrates correct behavior)", () => {
    let capturedValue: unknown

    const TestComp = defineComponent({
      props: {
        content: { type: String, required: false },
        "onUpdate:content": Function,
      },
      setup(props) {
        const modelRef = ref(props.content)
        watch(
          () => props.content,
          (val) => {
            if (val !== undefined) modelRef.value = val
          },
        )
        watch(
          () => modelRef.value,
          (val) => {
            capturedValue = val
          },
          { immediate: true },
        )
        return () => h("div")
      },
    })

    mount(TestComp, { props: { content: "Hello" } })
    expect(capturedValue).toBe("Hello")
  })
})
