import { mount } from '@vue/test-utils'
import { createPinia, setActivePinia } from 'pinia'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import ThemeToggle from '../../components/ThemeToggle.vue'

describe('ThemeToggle', () => {
  beforeEach(() => {
    setActivePinia(createPinia())
    vi.restoreAllMocks()
    vi.stubGlobal('localStorage', {
      getItem: vi.fn(() => null),
      setItem: vi.fn(),
      removeItem: vi.fn(),
      clear: vi.fn(),
    })
    Object.defineProperty(window, 'matchMedia', {
      configurable: true,
      writable: true,
      value: vi.fn(() => ({
        matches: false,
        media: '(prefers-color-scheme: dark)',
        onchange: null,
        addEventListener: vi.fn(),
        removeEventListener: vi.fn(),
        addListener: vi.fn(),
        removeListener: vi.fn(),
        dispatchEvent: vi.fn(),
      })),
    })
  })

  it('renders through IconButton while preserving the public theme-toggle class', async () => {
    const wrapper = mount(ThemeToggle, {
      props: { size: 'sm' },
    })

    const button = wrapper.find('button')
    expect(button.classes()).toContain('mint-theme-toggle')
    expect(button.classes()).toContain('mint-icon-button')
    expect(button.classes()).toContain('mint-icon-button--sm')
    expect(button.attributes('aria-label')).toBe('Switch to dark mode')

    await button.trigger('click')

    expect(button.attributes('aria-label')).toBe('Switch to light mode')
  })
})