import React from 'react';
import { fireEvent, render, screen } from '@testing-library/react';
import { beforeAll, vi } from 'vitest';
import { MemoryRouter } from 'react-router-dom';
import PhotoLightbox from '../PhotoLightbox';
import { EventBrandingProvider } from '../../context/EventBrandingContext';
import { LocaleProvider } from '../../i18n/LocaleContext';
import { ToastProvider } from '../../components/ToastHost';

const photo = {
  id: 1,
  file_path: '/test.jpg',
  likes_count: 0,
};

describe('PhotoLightbox zoom gestures', () => {
  beforeAll(() => {
    if (!window.matchMedia) {
      Object.defineProperty(window, 'matchMedia', {
        configurable: true,
        value: vi.fn().mockReturnValue({
          matches: false,
          addListener: vi.fn(),
          removeListener: vi.fn(),
          addEventListener: vi.fn(),
          removeEventListener: vi.fn(),
          dispatchEvent: vi.fn(),
        }),
      });
    }
  });

  it('toggles zoom state on double click', () => {
    render(
      <MemoryRouter>
        <LocaleProvider>
          <EventBrandingProvider>
            <ToastProvider>
              <PhotoLightbox photos={[photo]} currentIndex={0} token="event-token" />
            </ToastProvider>
          </EventBrandingProvider>
        </LocaleProvider>
      </MemoryRouter>
    );

    const zoomSurface = screen.getByTestId('lightbox-zoom');
    const container = zoomSurface.closest('[data-zoomed]');
    expect(container).toHaveAttribute('data-zoomed', 'false');

    fireEvent.doubleClick(zoomSurface);
    expect(container).toHaveAttribute('data-zoomed', 'true');

    fireEvent.doubleClick(zoomSurface);
    expect(container).toHaveAttribute('data-zoomed', 'false');
  });
});