import { describe, it, expect } from 'vitest'
import type { Handle } from '@remix-run/component'
import { render } from '../render.ts'
import { Frame } from '../../index.ts'

describe('Frame skeleton', () => {
  it('returns a managed region and preserves content across rerenders', () => {
    let container = document.createElement('div')
    let src = '/x'

    function App(this: Handle) {
      let count = 0
      return () => (
        <div>
          <button
            on={{
              type: 'click',
              handler: () => {
                count++
                this.render()
              },
            }}
          >
            {count}
          </button>
          <Frame src={src} />
        </div>
      )
    }

    render(<App />, container)

    // Insert static content between region boundaries
    let start = findBoundary(container, '0-0-1', 'start')
    let end = findBoundary(container, '0-0-1', 'end')
    expect(start && end).toBeTruthy()
    if (start && end) {
      let span = document.createElement('span')
      span.setAttribute('data-static', 'true')
      span.textContent = 'STATIC'
      start.parentNode!.insertBefore(span, end)
    }

    // Trigger rerender
    container.querySelector('button')!.click()

    // Static content remains
    expect(container.querySelector('[data-static="true"]')?.textContent).toBe('STATIC')
  })
})

function findBoundary(container: HTMLElement, id: string, suffix: 'start' | 'end'): Comment | null {
  let walker = document.createTreeWalker(container, NodeFilter.SHOW_COMMENT)
  let node: Comment | null
  let target = `RMX:${id}:${suffix}`
  while ((node = walker.nextNode() as Comment | null)) {
    if (node && node.nodeType === 8 && node.data === target) return node
  }
  return null
}