import React from 'react';
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { fireEvent, render, screen } from '@testing-library/react';
import AppearanceToggleDropdown from '../appearance-dropdown';
import { AppearanceProvider } from '@/hooks/use-appearance';

const matchMediaStub = (matches = false) => ({
  matches,
  media: '(prefers-color-scheme: dark)',
  onchange: null,
  addEventListener: vi.fn(),
  removeEventListener: vi.fn(),
  addListener: vi.fn(),
  removeListener: vi.fn(),
  dispatchEvent: vi.fn(),
});

describe('AppearanceToggleDropdown', () => {
  beforeEach(() => {
    Object.defineProperty(window, 'matchMedia', {
      writable: true,
      value: vi.fn().mockImplementation(() => matchMediaStub(false)),
    });
    localStorage.setItem('theme', 'light');
    document.documentElement.classList.remove('dark');
  });

  it('toggles the document class to dark mode', () => {
    render(
      <AppearanceProvider>
        <AppearanceToggleDropdown />
      </AppearanceProvider>,
    );

    const button = screen.getByRole('button');
    fireEvent.click(button);

    expect(document.documentElement.classList.contains('dark')).toBe(true);
    expect(localStorage.getItem('theme')).toBe('dark');
  });
});