import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { TrackSearchFilters } from './TrackSearchFilters';
import type { TrackSearchParams } from '../services/trackSearchService';

describe('TrackSearchFilters', () => {
  const mockOnFiltersChange = vi.fn();

  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('should render all filter controls', () => {
    render(
      <TrackSearchFilters filters={{}} onFiltersChange={mockOnFiltersChange} />,
    );

    expect(screen.getByText('Genre')).toBeInTheDocument();
    expect(screen.getByText('Format')).toBeInTheDocument();
    expect(screen.getByText('Trier par')).toBeInTheDocument();
    expect(screen.getByText('Ordre')).toBeInTheDocument();
  });

  it('should update filters when genre is selected', async () => {
    render(
      <TrackSearchFilters filters={{}} onFiltersChange={mockOnFiltersChange} />,
    );

    // Note: This is a simplified test. In a real scenario, you'd need to interact with the Select component
    // which might require more complex setup depending on the Select implementation
    expect(screen.getByText('Genre')).toBeInTheDocument();
  });

  it('should show advanced filters when toggle is clicked', async () => {
    render(
      <TrackSearchFilters filters={{}} onFiltersChange={mockOnFiltersChange} />,
    );

    const toggleButton = screen.getByText(/Afficher les filtres avancés/i);
    await userEvent.click(toggleButton);

    expect(
      screen.getByText(/Masquer les filtres avancés/i),
    ).toBeInTheDocument();
    expect(
      screen.getByText('Tags (séparés par des virgules)'),
    ).toBeInTheDocument();
    expect(screen.getByText('Durée (secondes)')).toBeInTheDocument();
    expect(screen.getByText('BPM')).toBeInTheDocument();
    expect(screen.getByText('Date de création')).toBeInTheDocument();
  });

  it('should show reset button when filters are active', () => {
    render(
      <TrackSearchFilters
        filters={{ genre: 'Rock', format: 'MP3' }}
        onFiltersChange={mockOnFiltersChange}
      />,
    );

    expect(screen.getByText('Réinitialiser')).toBeInTheDocument();
  });

  it('should clear filters when reset button is clicked', async () => {
    render(
      <TrackSearchFilters
        filters={{ genre: 'Rock', format: 'MP3' }}
        onFiltersChange={mockOnFiltersChange}
      />,
    );

    const resetButton = screen.getByText('Réinitialiser');
    await userEvent.click(resetButton);

    expect(mockOnFiltersChange).toHaveBeenCalledWith({});
  });
});
