import { mount } from '@vue/test-utils'
import { describe, expect, it } from 'vitest'
import BatchProgressList from '../../components/BatchProgressList.vue'
import type { BatchItem } from '../../types'

const items: BatchItem[] = [
  { id: 'a', label: 'Sample A', status: 'completed' },
  { id: 'b', label: 'Sample B', status: 'error', message: 'Import failed' },
  { id: 'c', label: 'Sample C', status: 'processing', progress: 50 },
]

describe('BatchProgressList', () => {
  it('summarizes progress and emits row actions', async () => {
    const wrapper = mount(BatchProgressList, {
      props: {
        title: 'Import',
        items,
        autoScroll: false,
      },
    })

    expect(wrapper.find('.mint-batch-progress__percent').text()).toBe('33%')
    expect(wrapper.text()).toContain('1 completed')
    expect(wrapper.text()).toContain('1 failed')
    expect(wrapper.text()).toContain('1 processing')

    await wrapper.get('.mint-batch-progress__retry-btn').trigger('click')
    await wrapper.get('.mint-batch-progress__cancel-btn').trigger('click')

    expect(wrapper.emitted('retry')).toEqual([[items[1].id]])
    expect(wrapper.emitted('cancel')).toEqual([[items[2].id]])
  })

  it('should show a failed item message inline when the item has an error', () => {
    const wrapper = mount(BatchProgressList, { props: { items, autoScroll: false } })
    expect(wrapper.get('.mint-batch-progress__item-message').text()).toBe('Import failed')
  })

  it('should count done over total in the header when a title is set', () => {
    const wrapper = mount(BatchProgressList, { props: { title: 'Import', items, autoScroll: false } })
    expect(wrapper.get('.mint-batch-progress__count').text()).toBe('1 / 3')
  })

  it('should collapse completed items behind a toggle when the list renders', () => {
    const wrapper = mount(BatchProgressList, { props: { items, autoScroll: false } })
    expect(wrapper.get('.mint-batch-progress__completed-toggle').text()).toBe('Show 1 completed')
  })

  it('should hide completed items by default when the list renders', () => {
    const wrapper = mount(BatchProgressList, { props: { items, autoScroll: false } })
    expect(wrapper.findAll('.mint-batch-progress__item').map(item => item.attributes('data-item-id')))
      .toEqual(['b', 'c'])
  })

  it('should reveal completed items when the toggle is clicked', async () => {
    const wrapper = mount(BatchProgressList, { props: { items, autoScroll: false } })
    await wrapper.get('.mint-batch-progress__completed-toggle').trigger('click')
    expect(wrapper.findAll('.mint-batch-progress__item')).toHaveLength(3)
  })
})