import { mount, flushPromises } from '@vue/test-utils'
import { beforeEach, describe, expect, it } from 'vitest'
import { createMemoryHistory, createRouter } from 'vue-router'

import NavShortcutRow from './NavShortcutRow.vue'
import { navItems } from '@/app/navigation/nav'

async function mountNavShortcutRow(path = '/chat') {
  const router = createRouter({
    history: createMemoryHistory(),
    routes: navItems.map((item) => ({
      path: item.path,
      name: item.path,
      component: { template: '<div />' },
    })),
  })

  await router.push(path)
  await router.isReady()

  return {
    router,
    wrapper: mount(NavShortcutRow, {
      global: {
        plugins: [router],
      },
    }),
  }
}

async function expandShortcuts(wrapper: ReturnType<typeof mount>) {
  await wrapper.get('.nav-trigger').trigger('click')
  await flushPromises()
}

describe('NavShortcutRow', () => {
  beforeEach(() => {
    document.body.innerHTML = ''
  })

  it('renders shortcuts only after expanding from the trigger', async () => {
    const { wrapper } = await mountNavShortcutRow()

    expect(wrapper.findAll('[data-testid="nav-shortcut"]')).toHaveLength(0)

    await expandShortcuts(wrapper)

    const shortcuts = wrapper.findAll('[data-testid="nav-shortcut"]')
    expect(shortcuts).toHaveLength(navItems.length)
    expect(shortcuts[0].attributes('title')).toBe(navItems[0].name)
    expect(shortcuts[0].attributes('aria-label')).toBe(navItems[0].name)
  })

  it('marks the current route as active after expansion', async () => {
    const { wrapper } = await mountNavShortcutRow('/skills')

    await expandShortcuts(wrapper)

    const shortcuts = wrapper.findAll('[data-testid="nav-shortcut"]')
    const activeShortcut = shortcuts[2]

    expect(activeShortcut.classes()).toContain('active')
    expect(activeShortcut.attributes('aria-current')).toBe('page')
    expect(shortcuts[0].classes()).not.toContain('active')
  })
})
