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

function mountBanner(props: { status: 'pending' | 'matched' | 'none' | null; message?: string | null }) {
  return mount(IdentityMatchBanner, {
    props,
    global: {
      stubs: {
        VAlert: {
          name: 'VAlert',
          props: ['type', 'variant', 'prominent'],
          template: '<div class="v-alert-stub" :data-type="type"><slot/></div>',
        },
      },
    },
  })
}

describe('IdentityMatchBanner', () => {
  it('renders nothing when status is null', () => {
    const w = mountBanner({ status: null })

    expect(w.find('.v-alert-stub').exists()).toBe(false)
  })

  it('renders the pending banner with info type and backend message when provided', () => {
    const w = mountBanner({
      status: 'pending',
      message: 'We controleren of je al bekend bent bij de organisator.',
    })

    const alert = w.find('.v-alert-stub')
    expect(alert.exists()).toBe(true)
    expect(alert.attributes('data-type')).toBe('info')
    expect(w.text()).toContain('We controleren')
  })

  it('renders the matched banner with success type and backend message when provided', () => {
    const w = mountBanner({
      status: 'matched',
      message: 'Je account is gekoppeld aan een bekende deelnemer.',
    })

    const alert = w.find('.v-alert-stub')
    expect(alert.exists()).toBe(true)
    expect(alert.attributes('data-type')).toBe('success')
    expect(w.text()).toContain('gekoppeld')
  })

  it('falls back to frontend copy when backend message is missing', () => {
    const w = mountBanner({ status: 'none', message: null })

    const alert = w.find('.v-alert-stub')
    expect(alert.exists()).toBe(true)
    expect(alert.attributes('data-type')).toBe('success')
    expect(w.text()).toContain('Aanmelding ontvangen')
  })
})