import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { TrackGridDensitySelector } from './TrackGridDensitySelector';

describe('TrackGridDensitySelector', () => {
  const mockOnChange = vi.fn();

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

  it('should render density selector', () => {
    render(<TrackGridDensitySelector value="normal" onChange={mockOnChange} />);
    expect(screen.getByRole('radiogroup')).toBeInTheDocument();
  });

  it('should display all density options', () => {
    render(<TrackGridDensitySelector value="normal" onChange={mockOnChange} />);
    expect(screen.getByLabelText(/Compact/)).toBeInTheDocument();
    expect(screen.getByLabelText(/Normal/)).toBeInTheDocument();
    expect(screen.getByLabelText(/Confortable/)).toBeInTheDocument();
  });

  it('should highlight selected density', () => {
    render(
      <TrackGridDensitySelector value="compact" onChange={mockOnChange} />,
    );
    const compactButton = screen.getByLabelText(/Compact/);
    expect(compactButton).toHaveAttribute('aria-pressed', 'true');
  });

  it('should call onChange when density is changed', async () => {
    const user = userEvent.setup();
    render(<TrackGridDensitySelector value="normal" onChange={mockOnChange} />);

    const compactButton = screen.getByLabelText(/Compact/);
    await user.click(compactButton);

    expect(mockOnChange).toHaveBeenCalledWith('compact');
  });

  it('should apply custom className', () => {
    const { container } = render(
      <TrackGridDensitySelector
        value="normal"
        onChange={mockOnChange}
        className="custom-class"
      />,
    );
    expect(container.firstChild).toHaveClass('custom-class');
  });

  it('should have accessible attributes', () => {
    render(<TrackGridDensitySelector value="normal" onChange={mockOnChange} />);

    const radiogroup = screen.getByRole('radiogroup');
    expect(radiogroup).toHaveAttribute('aria-label');

    const buttons = screen.getAllByRole('radio');
    buttons.forEach((button) => {
      expect(button).toHaveAttribute('aria-pressed');
      expect(button).toHaveAttribute('aria-label');
    });
  });
});
