import assert from 'node:assert/strict'
import { readFileSync } from 'node:fs'
import test from 'node:test'
import { parse } from '@vue/compiler-sfc'
import ts from 'typescript'
import * as vue from 'vue'

test('mobile form remounts on identity changes and rejects events from the previous form', () => {
  const source = parse(
    readFileSync(new URL('../src/views/m/pl/plan/form.vue', import.meta.url), 'utf8')
  ).descriptor.scriptSetup!.content
  const tree = ts.createSourceFile('form.ts', source, ts.ScriptTarget.Latest, true)
  const code = tree.statements
    .filter((node) => !ts.isImportDeclaration(node))
    .map((node) => node.getText(tree))
    .join('\n')
  const user = vue.reactive({ accessToken: 'old', info: { id: 'u1' } })
  const route = vue.reactive({ name: 'MpPlPlanEdit', params: { id: 'A' }, query: {}, meta: {} })
  const navigations: any[] = []
  const bindings = {
    computed: vue.computed,
    ref: vue.ref,
    watch: vue.watch,
    useUserStore: () => user,
    useRoute: () => route,
    useRouter: () => ({ replace: (to: any) => navigations.push(to) }),
    MP_PLAN_LIST_PATH: '/m/pl/plan'
  }
  const scope = vue.effectScope()
  const api: any = scope.run(() =>
    new Function(
      ...Object.keys(bindings),
      ts.transpile(code) +
        ';return {formKey,contentLoading,formEvents: typeof formEvents === "undefined" ? undefined : formEvents}'
    )(...Object.values(bindings))
  )
  try {
    const key = api.formKey.value
    const oldEvents = api.formEvents?.value
    api.contentLoading.value = false
    user.accessToken = 'new'
    assert.notEqual(api.formKey.value, key)
    assert.equal(api.contentLoading.value, true)
    oldEvents['loading-change'](false)
    oldEvents.success({ planId: 'OLD' })
    oldEvents.close()
    assert.equal(api.contentLoading.value, true)
    assert.deepEqual(navigations, [])
    api.formEvents.value['loading-change'](false)
    assert.equal(api.contentLoading.value, false)
    api.formEvents.value.success({ planId: 'NEW' })
    assert.deepEqual(navigations, ['/m/pl/plan/NEW'])
  } finally {
    scope.stop()
  }
})