import { App, createApp, h, nextTick } from 'vue'
import { afterEach, beforeAll, describe, expect, it } from 'vitest'

let InfoResizer: any

interface RenderResult {
    app: App
    el: HTMLDivElement
}

const renderedApps: RenderResult[] = []

beforeAll(async () => {
    InfoResizer = (await import('../../../components/infoResizer/index.vue')).default
})

const renderResizer = async (props: Record<string, any> = {}) => {
    const el = document.createElement('div')
    document.body.appendChild(el)

    const app = createApp({
        render () {
            return h(InfoResizer, props)
        }
    })

    app.mount(el)
    await nextTick()

    const result = { app, el }
    renderedApps.push(result)
    return result
}

const getResizer = () => document.body.querySelector('.splitter-pane-resizer') as HTMLElement | null

const getMoveImage = () => document.body.querySelector('.imgMove') as HTMLImageElement | null

afterEach(() => {
    while (renderedApps.length) {
        const current = renderedApps.pop()!
        current.app.unmount()
        current.el.remove()
    }
    document.body.innerHTML = ''
})

describe('components/infoResizer', () => {
    it('默认渲染基础 class，split 为空字符串且不会渲染拖拽按钮', async () => {
        await renderResizer()

        const resizer = getResizer()
        expect(resizer).not.toBeNull()
        expect(resizer?.className).toContain('splitter-pane-resizer')
        expect(resizer?.getAttribute('data-type')).toBe('')
        expect(getMoveImage()).toBeNull()
    })

    it('split 为 horizontal 时追加方向 class 并透传 data-type', async () => {
        await renderResizer({
            split: 'horizontal'
        })

        const resizer = getResizer()
        expect(resizer).not.toBeNull()
        expect(resizer?.className).toContain('splitter-pane-resizer')
        expect(resizer?.className).toContain('horizontal')
        expect(resizer?.getAttribute('data-type')).toBe('horizontal')
    })

    it('split 为 vertical 且 showButton 为 true 时，当前仍不渲染按钮节点', async () => {
        await renderResizer({
            split: 'vertical',
            showButton: true
        })

        const resizer = getResizer()
        expect(resizer).not.toBeNull()
        expect(resizer?.className).toContain('vertical')
        expect(resizer?.getAttribute('data-type')).toBe('vertical')
        expect(getMoveImage()).toBeNull()
    })
})