import { describe, it, expect, beforeEach } from 'vitest'
import { mount } from '@vue/test-utils'
import { setActivePinia, createPinia } from 'pinia'
import { useToastStore } from '../../../stores/toast.js'
import ToastContainer from '../ToastContainer.vue'

beforeEach(() => {
  setActivePinia(createPinia())
})

describe('ToastContainer', () => {
  it('renders nothing when store.toasts is empty', () => {
    const wrapper = mount(ToastContainer, {
      global: {
        stubs: { AppIcon: true, Teleport: true },
      },
    })
    expect(wrapper.find('[data-test="toast"]').exists()).toBe(false)
  })

  it('renders one element per toast', () => {
    const store = useToastStore()
    store.show('First', 'success', 0)
    store.show('Second', 'error', 0)
    const wrapper = mount(ToastContainer, {
      global: {
        stubs: { AppIcon: true, Teleport: true },
      },
    })
    expect(wrapper.findAll('[data-test="toast"]').length).toBe(2)
  })

  it('clicking a toast calls dismiss(id)', async () => {
    const store = useToastStore()
    store.show('Click me', 'info', 0)
    const wrapper = mount(ToastContainer, {
      global: {
        stubs: { AppIcon: true, Teleport: true },
      },
    })
    await wrapper.find('[data-test="toast"]').trigger('click')
    expect(store.toasts.length).toBe(0)
  })

  it('accent class matches type (success -> bg-green-500)', () => {
    const store = useToastStore()
    store.show('Success toast', 'success', 0)
    const wrapper = mount(ToastContainer, {
      global: {
        stubs: { AppIcon: true, Teleport: true },
      },
    })
    const toast = wrapper.find('[data-test="toast"]')
    const accentBar = toast.find('.bg-green-500')
    expect(accentBar.exists()).toBe(true)
  })
})
