import { describe, expect, it } from 'vitest'
import { mount } from '@vue/test-utils'
import TimelineNav from 'components/TimelineNav.vue'

// The menu is a portal; rendering it inline keeps the year list testable.
const inlineMenu = {
  QMenu: {
    props: ['modelValue'],
    template: '<div v-if="modelValue" class="menu-stub"><slot /></div>'
  }
}

function mountNav(props = {}) {
  return mount(TimelineNav, {
    props: {
      year: 2026,
      month: 'Januar',
      years: [2025, 2026, 2027],
      canPrev: true,
      canNext: true,
      ...props
    },
    global: { stubs: inlineMenu }
  })
}

describe('TimelineNav — the position pill', () => {
  it('shows month and year of the centred event', () => {
    const wrapper = mountNav()

    expect(wrapper.find('.timeline-nav__month').text()).toBe('Januar')
    expect(wrapper.find('.timeline-nav__year').text()).toBe('2026')
  })

  it('emits prev and next from the arrows', async () => {
    const wrapper = mountNav()
    const arrows = wrapper.findAll('.timeline-nav__arrow')

    await arrows[0].trigger('click')
    await arrows[1].trigger('click')

    expect(wrapper.emitted('prev')).toHaveLength(1)
    expect(wrapper.emitted('next')).toHaveLength(1)
  })

  it('disables the arrows at either end of the data', () => {
    const wrapper = mountNav({ canPrev: false, canNext: false })
    const arrows = wrapper.findAll('.timeline-nav__arrow')

    expect(arrows[0].attributes('disabled')).toBeDefined()
    expect(arrows[1].attributes('disabled')).toBeDefined()
  })

  it('opens the year list on tap and emits the chosen year', async () => {
    const wrapper = mountNav()

    expect(wrapper.find('.menu-stub').exists()).toBe(false)
    await wrapper.find('.timeline-nav__label').trigger('click')
    expect(wrapper.find('.menu-stub').exists()).toBe(true)

    const items = wrapper.findAll('.timeline-nav__year-item')
    expect(items.map(item => item.text())).toEqual(['2025', '2026', '2027'])

    await items[2].trigger('click')
    expect(wrapper.emitted('jump')).toEqual([[2027]])
    // Choosing closes the list.
    expect(wrapper.find('.menu-stub').exists()).toBe(false)
  })

  it('shows a dash and no month while there is no event', () => {
    const wrapper = mountNav({ year: null, month: '', years: [], canPrev: false, canNext: false })

    expect(wrapper.find('.timeline-nav__year').text()).toBe('–')
    expect(wrapper.find('.timeline-nav__month').exists()).toBe(false)
    expect(wrapper.find('.timeline-nav__label').attributes('disabled')).toBeDefined()
  })
})