import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import React from 'react';
import { MapBasemapControl } from './map-basemap-control';

describe('MapBasemapControl', () => {
  it('offers all six base maps by default', () => {
    render(<MapBasemapControl value="roads" onChange={() => {}} />);
    expect(screen.getAllByRole('button')).toHaveLength(6);
  });

  it('includes high contrast, the accessibility route', () => {
    render(<MapBasemapControl value="roads" onChange={() => {}} />);
    expect(screen.getByRole('button', { name: 'High contrast' })).toBeInTheDocument();
  });

  it('marks the active base map', () => {
    render(<MapBasemapControl value="night" onChange={() => {}} />);

    expect(screen.getByRole('button', { name: 'Night' })).toHaveAttribute('aria-pressed', 'true');
    expect(screen.getByRole('button', { name: 'Roads' })).toHaveAttribute('aria-pressed', 'false');
  });

  it('reports the chosen base map', () => {
    const onChange = vi.fn();
    render(<MapBasemapControl value="roads" onChange={onChange} />);

    fireEvent.click(screen.getByRole('button', { name: 'Satellite' }));
    expect(onChange).toHaveBeenCalledWith('satellite');
  });

  it('honours a reduced option set', () => {
    render(
      <MapBasemapControl value="roads" onChange={() => {}} options={['roads', 'satellite']} />
    );
    expect(screen.getAllByRole('button')).toHaveLength(2);
  });

  it('accepts translated labels', () => {
    render(<MapBasemapControl value="roads" onChange={() => {}} labels={{ roads: 'Ruas' }} />);
    expect(screen.getByRole('button', { name: 'Ruas' })).toBeInTheDocument();
  });

  it('names the control group', () => {
    render(<MapBasemapControl value="roads" onChange={() => {}} />);
    expect(screen.getByRole('group', { name: 'Base map' })).toBeInTheDocument();
  });
});