import ElementPlus from 'element-plus'
import { flushPromises, mount } from '@vue/test-utils'
import { afterEach, describe, expect, it } from 'vitest'
import { readFileSync } from 'node:fs'
import { resolve } from 'node:path'
import SmartLoadingDialog from './SmartLoadingDialog.vue'

describe('SmartLoadingDialog', () => {
  afterEach(() => { document.body.innerHTML = '' })

  it('opens fullscreen by default, can return to normal size, and reopens fullscreen', async () => {
    const wrapper = mount(SmartLoadingDialog, {
      attachTo: document.body,
      props: { modelValue: true },
      global: {
        plugins: [ElementPlus],
        stubs: { GlobalSmartLoadingView: { template: '<div>智能装柜工作台</div>' } },
      },
    })
    await flushPromises()

    expect(wrapper.find('.smart-loading-dialog__warehouses').exists()).toBe(false)
    expect(document.querySelector('.smart-loading-dialog .el-dialog__body')?.classList.contains('el-dialog__body')).toBe(true)
    expect(document.querySelector('.smart-loading-dialog.is-fullscreen')).not.toBeNull()
    expect(wrapper.find('button[aria-label="退出全屏"]').exists()).toBe(true)

    await wrapper.get('button[aria-label="退出全屏"]').trigger('click')
    expect(document.querySelector('.smart-loading-dialog.is-fullscreen')).toBeNull()
    expect(wrapper.find('button[aria-label="展开全屏"]').exists()).toBe(true)

    await wrapper.setProps({ modelValue: false })
    await flushPromises()
    await wrapper.setProps({ modelValue: true })
    await flushPromises()
    expect(document.querySelector('.smart-loading-dialog.is-fullscreen')).not.toBeNull()
    expect(wrapper.find('button[aria-label="退出全屏"]').exists()).toBe(true)
  })

  it('keeps the outer dialog fixed so only workbench data panes scroll', () => {
    const source = readFileSync(resolve(process.cwd(), 'src/modules/container-loading/components/SmartLoadingDialog.vue'), 'utf8')
    expect(source).toContain('height: 94vh; max-height: 94vh;')
    expect(source).toContain('flex: 1; padding: 0; overflow: hidden;')
    expect(source).toContain('min-height: 0; flex: 1; overflow: hidden;')
  })
})