import { describe, it, expect, beforeEach } from 'vitest'
import { mountSuspended, registerEndpoint } from '@nuxt/test-utils/runtime'
import NavDrawer from '../../app/components/NavDrawer.vue'

const mountDrawer = (props = {}) => {
  return mountSuspended(NavDrawer, {
    props: { modelValue: true, ...props },
    attachTo: document.body,
  })
}

describe('NavDrawer', () => {
  beforeEach(() => {
    registerEndpoint('/api/me', () => ({ id: '1', identifier: 'user', role: 'member', avatar_url: null }), { method: 'GET' })
  })

  it('renders navigation links with correct paths', async () => {
    await mountDrawer()
    const hrefs = [...document.body.querySelectorAll('aside nav a[href]')].map(a => a.getAttribute('href'))
    expect(hrefs).toEqual(expect.arrayContaining(['/', '/account', '/cameras', '/poi', '/members', '/settings']))
  })

  it.each([
    ['Map'],
    ['Settings'],
  ])('renders %s label', async (label) => {
    await mountDrawer()
    expect(document.body.textContent).toContain(label)
  })

  it('emits update:modelValue when close is triggered', async () => {
    const wrapper = await mountDrawer()
    expect(document.body.querySelector('aside button[aria-label="Close navigation"]')).toBeTruthy()
    await wrapper.vm.close()
    expect(wrapper.emitted('update:modelValue')).toEqual([[false]])
  })

  it('applies active styling for current route', async () => {
    await mountDrawer()
    const mapLink = document.body.querySelector('aside nav a[href="/"]')
    expect(mapLink?.className).toMatch(/kestrel-accent|border-kestrel-accent/)
  })
})