import { describe, expect, it } from 'vitest'
import { mount } from '@vue/test-utils'
import { nextTick } from 'vue'
import InfoContainer from '../../../components/layout/infoContainer.vue'

const mountComponent = (props = {}) => mount(InfoContainer, {
    props,
    slots: {
        aside: '<div class="slot-aside">aside slot</div>',
        header: '<div class="slot-header">header slot</div>',
        main: '<div class="slot-main">main slot</div>',
        footer: '<div class="slot-footer">footer slot</div>'
    }
})

describe('layout/infoContainer.vue', () => {
    it('默认渲染 header、main、footer，且默认不渲染 aside', () => {
        const wrapper = mountComponent()

        expect(wrapper.find('.slot-header').exists()).toBe(true)
        expect(wrapper.find('.slot-main').exists()).toBe(true)
        expect(wrapper.find('.slot-footer').exists()).toBe(true)
        expect(wrapper.find('.slot-aside').exists()).toBe(false)
    })

    it('支持 layout 中的布尔值和函数分支控制区域显示', () => {
        const wrapper = mountComponent({
            layout: {
                aside: () => true,
                header: () => false,
                main: true,
                footer: false
            }
        })

        expect(wrapper.find('.slot-aside').exists()).toBe(true)
        expect(wrapper.find('.slot-header').exists()).toBe(false)
        expect(wrapper.find('.slot-main').exists()).toBe(true)
        expect(wrapper.find('.slot-footer').exists()).toBe(false)
    })

    it('横向拖拽时更新 aside 宽度并切换 user-select', async () => {
        const wrapper = mountComponent({
            layout: {
                aside: true,
                header: true,
                main: true,
                footer: true
            }
        })

        const root = wrapper.find('.el-container').element as HTMLElement
        Object.defineProperty(root, 'offsetWidth', {
            configurable: true,
            value: 1000
        })
        Object.defineProperty(root, 'offsetLeft', {
            configurable: true,
            value: 0
        })
        Object.defineProperty(root, 'offsetParent', {
            configurable: true,
            value: null
        })

        await wrapper.find('.splitter-pane-resizer.horizontal').trigger('mousedown')
        expect(wrapper.attributes('style')).toContain('user-select: none;')

        const moveEvent = new MouseEvent('mousemove', {
            bubbles: true,
            buttons: 1
        })
        Object.defineProperty(moveEvent, 'which', {
            configurable: true,
            get: () => 1
        })
        Object.defineProperty(moveEvent, 'pageX', {
            configurable: true,
            get: () => 300
        })
        wrapper.element.dispatchEvent(moveEvent)
        await nextTick()

        expect(wrapper.find('.el-aside').attributes('style')).toContain('width: 30%;')

        await wrapper.trigger('mouseup')
        await nextTick()

        expect(wrapper.attributes('style')).toContain('user-select: text;')
    })

    it('纵向拖拽时更新 footer 高度', async () => {
        const wrapper = mountComponent({
            layout: {
                aside: false,
                header: true,
                main: true,
                footer: true
            },
            isResizerVertical: true
        })

        const root = wrapper.find('.el-container').element as HTMLElement
        Object.defineProperty(root, 'offsetHeight', {
            configurable: true,
            value: 1000
        })
        Object.defineProperty(root, 'offsetTop', {
            configurable: true,
            value: 0
        })
        Object.defineProperty(root, 'offsetParent', {
            configurable: true,
            value: null
        })

        await wrapper.find('.splitter-pane-resizer.vertical').trigger('mousedown')
        const moveEvent = new MouseEvent('mousemove', {
            bubbles: true,
            buttons: 1
        })
        Object.defineProperty(moveEvent, 'which', {
            configurable: true,
            get: () => 1
        })
        Object.defineProperty(moveEvent, 'pageY', {
            configurable: true,
            get: () => 200
        })
        wrapper.element.dispatchEvent(moveEvent)
        await nextTick()

        expect(wrapper.find('.el-footer').attributes('style')).toContain('height: 80%;')
    })
})