import { describe, it, expect, vi } from 'vitest'
import { mount } from '@vue/test-utils'
import StickerTray from '@/components/StickerTray.vue'
import { STICKERS, STICKER_CATEGORIES } from '@/assets/stickers/index'

// Stub the bottom sheet so the modal contents are always rendered inline
vi.mock('@/components/BaseBottomSheet.vue', () => ({
  default: {
    name: 'BaseBottomSheet',
    template: '<div class="bottom-sheet-stub"><slot /></div>',
    props: ['modelValue', 'label'],
    emits: ['update:modelValue'],
  },
}))

describe('StickerTray', () => {
  it('renders one tab per sticker category', () => {
    const wrapper = mount(StickerTray, { props: { modelValue: true } })
    expect(wrapper.findAll('.sticker-tray__cat')).toHaveLength(STICKER_CATEGORIES.length)
  })

  it('starts on the seasonal category', () => {
    const wrapper = mount(StickerTray, { props: { modelValue: true } })
    const seasonal = wrapper.findAll('.sticker-tray__cat').find(b => b.text() === 'Seasonal')
    expect(seasonal?.classes()).toContain('sticker-tray__cat--active')
    const seasonalCount = STICKERS.filter(s => s.category === 'seasonal').length
    expect(wrapper.findAll('.sticker-tray__item')).toHaveLength(seasonalCount)
  })

  it('switches the visible grid when a different category tab is clicked', async () => {
    const wrapper = mount(StickerTray, { props: { modelValue: true } })
    const fun = wrapper.findAll('.sticker-tray__cat').find(b => b.text() === 'Fun')!
    await fun.trigger('click')
    const funCount = STICKERS.filter(s => s.category === 'fun').length
    expect(wrapper.findAll('.sticker-tray__item')).toHaveLength(funCount)
    expect(fun.classes()).toContain('sticker-tray__cat--active')
  })

  it('emits "pick" with the sticker id when an item is clicked', async () => {
    const wrapper = mount(StickerTray, { props: { modelValue: true } })
    const firstItem = wrapper.find('.sticker-tray__item')
    await firstItem.trigger('click')
    const events = wrapper.emitted('pick')
    expect(events).toBeTruthy()
    expect(typeof events![0][0]).toBe('string')
  })

  it('forwards update:modelValue from the wrapped sheet', async () => {
    const wrapper = mount(StickerTray, { props: { modelValue: true } })
    await wrapper.findComponent({ name: 'BaseBottomSheet' }).vm.$emit('update:modelValue', false)
    expect(wrapper.emitted('update:modelValue')).toEqual([[false]])
  })
})
