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

const steps = [
  { id: 'setup', label: 'Setup' },
  { id: 'review', label: 'Review' },
]

function navButton(wrapper: ReturnType<typeof mount>, label: string) {
  const button = wrapper.findAllComponents(BaseButton).find((b) => b.text() === label)
  if (!button) throw new Error(`no ${label} button`)
  return button
}

describe('StepWizard navigation (2c)', () => {
  it('should render Cancel as a ghost BaseButton', () => {
    const wrapper = mount(StepWizard, { props: { steps } })

    expect(navButton(wrapper, 'Cancel').props('variant')).toBe('ghost')
  })

  it('should render Back as a secondary BaseButton', () => {
    const wrapper = mount(StepWizard, { props: { steps } })

    expect(navButton(wrapper, 'Back').props('variant')).toBe('secondary')
  })

  it('should render Next as a primary BaseButton', () => {
    const wrapper = mount(StepWizard, { props: { steps } })

    expect(navButton(wrapper, 'Next').props('variant')).toBe('primary')
  })

  it('should render Finish as a primary BaseButton on the last step', () => {
    const wrapper = mount(StepWizard, { props: { steps, modelValue: 1 } })

    expect(navButton(wrapper, 'Finish').props('variant')).toBe('primary')
  })

  it('should disable Back on the first step', () => {
    const wrapper = mount(StepWizard, { props: { steps } })

    expect(navButton(wrapper, 'Back').props('disabled')).toBe(true)
  })

  it('should pass the wizard size to the nav buttons', () => {
    const wrapper = mount(StepWizard, { props: { steps, size: 'sm' } })

    expect(navButton(wrapper, 'Next').props('size')).toBe('sm')
  })

  it('should emit complete when Finish is clicked', async () => {
    const wrapper = mount(StepWizard, { props: { steps, modelValue: 1 } })

    await navButton(wrapper, 'Finish').trigger('click')

    expect(wrapper.emitted('complete')).toHaveLength(1)
  })

  it('should emit the next index when Next is clicked', async () => {
    const wrapper = mount(StepWizard, { props: { steps } })

    await navButton(wrapper, 'Next').trigger('click')

    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([1])
  })

  it('should show the current step counter in the nav', () => {
    const wrapper = mount(StepWizard, { props: { steps, modelValue: 1 } })

    expect(wrapper.find('.mint-wizard__counter').text()).toBe('2 / 2')
  })
})