import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import React from 'react';
import { MapLayerPanel } from './map-layer-panel';
import type { MapDataLayer } from '../map/map-layers-model';

const layers: MapDataLayer[] = [
  { id: 'alvo-a', label: 'Alvo A', group: 'Alvos', colorToken: '--chart-1', visible: true },
  { id: 'alvo-b', label: 'Alvo B', group: 'Alvos', colorToken: '--chart-2', visible: false },
  { id: 'setores', label: 'Setores censitários', group: 'Território', visible: true },
];

describe('MapLayerPanel', () => {
  it('renders one switch per layer', () => {
    render(<MapLayerPanel layers={layers} onToggle={() => {}} />);
    expect(screen.getAllByRole('switch')).toHaveLength(3);
  });

  it('labels each switch with its layer', () => {
    render(<MapLayerPanel layers={layers} onToggle={() => {}} />);
    expect(screen.getByRole('switch', { name: 'Alvo A' })).toBeInTheDocument();
    expect(screen.getByRole('switch', { name: 'Setores censitários' })).toBeInTheDocument();
  });

  it('reflects the visible flag', () => {
    render(<MapLayerPanel layers={layers} onToggle={() => {}} />);
    expect(screen.getByRole('switch', { name: 'Alvo A' })).toBeChecked();
    expect(screen.getByRole('switch', { name: 'Alvo B' })).not.toBeChecked();
  });

  it('reports a toggle with the new state', () => {
    const onToggle = vi.fn();
    render(<MapLayerPanel layers={layers} onToggle={onToggle} />);

    fireEvent.click(screen.getByRole('switch', { name: 'Alvo A' }));
    expect(onToggle).toHaveBeenCalledWith('alvo-a', false);

    fireEvent.click(screen.getByRole('switch', { name: 'Alvo B' }));
    expect(onToggle).toHaveBeenCalledWith('alvo-b', true);
  });

  it('renders group headings', () => {
    render(<MapLayerPanel layers={layers} onToggle={() => {}} />);
    expect(screen.getByText('Alvos')).toBeInTheDocument();
    expect(screen.getByText('Território')).toBeInTheDocument();
  });

  it('names the panel', () => {
    render(<MapLayerPanel layers={layers} onToggle={() => {}} title="Camadas" />);
    expect(screen.getByRole('group', { name: 'Camadas' })).toBeInTheDocument();
  });
});