import { defineComponent } from 'vue'
import { mount } from '@vue/test-utils'
import { describe, expect, it } from 'vitest'
import { readFileSync } from 'node:fs'
import { resolve } from 'node:path'
import AppDrawer from './AppDrawer.vue'

const ElDrawerStub = defineComponent({
  props: {
    modelValue: Boolean,
    showClose: Boolean,
    closeOnClickModal: Boolean,
    closeOnPressEscape: Boolean,
  },
  template: '<section data-testid="drawer"><slot name="header" /><slot /><slot name="footer" /></section>',
})

const ElButtonStub = defineComponent({
  props: { disabled: Boolean, loading: Boolean },
  emits: ['click'],
  template: '<button type="button" :disabled="disabled" @click="$emit(\'click\')"><slot /></button>',
})

function mountDrawer(props: Record<string, unknown> = {}) {
  return mount(AppDrawer, {
    props: { modelValue: true, title: '编辑资料', ...props },
    slots: { default: '<p>抽屉内容</p>' },
    global: {
      stubs: { ElDrawer: ElDrawerStub, ElButton: ElButtonStub },
      directives: { loading: {} },
    },
  })
}

describe('AppDrawer', () => {
  it('provides default cancel and confirm actions', async () => {
    const wrapper = mountDrawer()
    const buttons = wrapper.findAll('button')

    expect(buttons.map((button) => button.text())).toEqual(['取消', '确定'])
    await buttons[1].trigger('click')
    expect(wrapper.emitted('confirm')).toHaveLength(1)

    await buttons[0].trigger('click')
    expect(wrapper.emitted('cancel')).toHaveLength(1)
    expect(wrapper.emitted('update:modelValue')).toEqual([[false]])
  })

  it('prevents accidental closing while confirmation is submitting', () => {
    const wrapper = mountDrawer({ confirmLoading: true })
    const drawer = wrapper.getComponent(ElDrawerStub)
    const cancelButton = wrapper.findAll('button')[0]

    expect(drawer.props('showClose')).toBe(false)
    expect(drawer.props('closeOnClickModal')).toBe(false)
    expect(drawer.props('closeOnPressEscape')).toBe(false)
    expect(cancelButton.attributes('disabled')).toBeDefined()
  })

  it('keeps the drawer chrome fixed while long content scrolls in the body', () => {
    const source = readFileSync(resolve(process.cwd(), 'src/shared/components/AppDrawer.vue'), 'utf8')

    expect(source).toContain(':global(.app-drawer .el-drawer__body) { min-height: 0; overflow-y: auto;')
    expect(source).toContain('max-width: 94vw')
  })
})