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

describe('Breadcrumb', () => {
  it('accepts string shorthand items', async () => {
    const wrapper = mount(Breadcrumb, {
      props: {
        items: ['Project', { label: 'Experiment', href: '/experiments/EXP-001' }, 'Analysis'],
      },
    })

    expect(wrapper.findAll('.mint-breadcrumb__item').map(item => item.text())).toEqual([
      'Project',
      'Experiment',
      'Analysis',
    ])

    await wrapper.find('button.mint-breadcrumb__link').trigger('click')

    expect(wrapper.emitted('navigate')).toEqual([[{ label: 'Project' }]])
  })

  const long = ['Metabolomics', 'EXP-042', 'Batch 12', 'LC-MS run', 'Peak areas']

  it('should collapse the middle segments when the trail has more than four', () => {
    const wrapper = mount(Breadcrumb, { props: { items: long } })

    expect(wrapper.findAll('.mint-breadcrumb__item').map(item => item.text())).toEqual([
      'Metabolomics',
      '…',
      'LC-MS run',
      'Peak areas',
    ])
  })

  it('should show every segment when the ellipsis is clicked', async () => {
    const wrapper = mount(Breadcrumb, { props: { items: long } })

    await wrapper.find('.mint-breadcrumb__ellipsis').trigger('click')

    expect(wrapper.findAll('.mint-breadcrumb__item')).toHaveLength(5)
  })

  it('should keep the original index in the item slot when collapsed', () => {
    const wrapper = mount(Breadcrumb, {
      props: { items: long },
      slots: { item: '<template #item="{ index }">{{ index }}</template>' },
    })

    expect(wrapper.findAll('.mint-breadcrumb__item').map(item => item.text())).toEqual(['0', '…', '3', '4'])
  })

  it('should render ID segments in mono when the label looks like an ID', () => {
    const wrapper = mount(Breadcrumb, { props: { items: ['Metabolomics', 'EXP-042', 'Results'] } })

    expect(wrapper.findAll('.mint-breadcrumb__link')[1].classes()).toContain('mint-breadcrumb__segment--id')
  })

  it('should collapse again when the trail changes after expanding', async () => {
    const wrapper = mount(Breadcrumb, { props: { items: long } })
    await wrapper.find('.mint-breadcrumb__ellipsis').trigger('click')

    await wrapper.setProps({ items: [...long.slice(0, 4), 'Report'] })

    expect(wrapper.find('.mint-breadcrumb__ellipsis').exists()).toBe(true)
  })
})