/**
 * LanguageSwitcher Tests
 *
 * Tests the language dropdown UI component.
 */

import { render, screen, fireEvent, act } from '@testing-library/react';
import { LanguageSwitcher } from '../LanguageSwitcher';
import { LanguageProvider } from '../LanguageProvider';
import { Language } from '@/lib/translations/dealer-template';

// Mock sessionStorage
const mockSessionStorage = (() => {
  let store: Record<string, string> = {};
  return {
    getItem: (key: string) => store[key] || null,
    setItem: (key: string, value: string) => {
      store[key] = value;
    },
    clear: () => {
      store = {};
    },
  };
})();
Object.defineProperty(window, 'sessionStorage', { value: mockSessionStorage });

// Mock document.cookie
let mockCookie = '';
Object.defineProperty(document, 'cookie', {
  get: () => mockCookie,
  set: (value: string) => {
    mockCookie = value;
  },
});

const renderWithProvider = (defaultLanguage: Language = 'en') => {
  return render(
    <LanguageProvider defaultLanguage={defaultLanguage} subdomain="test">
      <LanguageSwitcher />
    </LanguageProvider>
  );
};

describe('LanguageSwitcher', () => {
  beforeEach(() => {
    mockSessionStorage.clear();
    mockCookie = '';
  });

  describe('Rendering', () => {
    it('renders a language dropdown with all options', () => {
      renderWithProvider();

      const select = screen.getByRole('combobox', { name: 'Select language' });
      expect(select).toBeInTheDocument();

      const options = select.querySelectorAll('option');
      expect(options).toHaveLength(3);
      expect(options[0]).toHaveTextContent('EN');
      expect(options[1]).toHaveTextContent('ES');
      expect(options[2]).toHaveTextContent('FR');
    });

    it('renders with correct aria-label', () => {
      renderWithProvider();

      expect(screen.getByRole('combobox', { name: 'Select language' })).toBeInTheDocument();
    });
  });

  describe('Active state', () => {
    it('shows EN selected when language is English', () => {
      renderWithProvider('en');

      const select = screen.getByRole('combobox', { name: 'Select language' }) as HTMLSelectElement;
      expect(select.value).toBe('en');
    });

    it('shows ES selected when language is Spanish', () => {
      renderWithProvider('es');

      const select = screen.getByRole('combobox', { name: 'Select language' }) as HTMLSelectElement;
      expect(select.value).toBe('es');
    });

    it('shows FR selected when language is French', () => {
      renderWithProvider('fr');

      const select = screen.getByRole('combobox', { name: 'Select language' }) as HTMLSelectElement;
      expect(select.value).toBe('fr');
    });
  });

  describe('Interaction', () => {
    it('switching to Spanish updates the selection', () => {
      renderWithProvider('en');

      const select = screen.getByRole('combobox', { name: 'Select language' }) as HTMLSelectElement;

      act(() => {
        fireEvent.change(select, { target: { value: 'es' } });
      });

      expect(select.value).toBe('es');
    });

    it('switching to French updates the selection', () => {
      renderWithProvider('en');

      const select = screen.getByRole('combobox', { name: 'Select language' }) as HTMLSelectElement;

      act(() => {
        fireEvent.change(select, { target: { value: 'fr' } });
      });

      expect(select.value).toBe('fr');
    });

    it('switching to English from another language works', () => {
      renderWithProvider('fr');

      const select = screen.getByRole('combobox', { name: 'Select language' }) as HTMLSelectElement;

      act(() => {
        fireEvent.change(select, { target: { value: 'en' } });
      });

      expect(select.value).toBe('en');
    });
  });
});