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

describe('MapDrawToolbar', () => {
  it('offers polygon and circle plus an explicit idle state', () => {
    render(<MapDrawToolbar active={null} onChange={() => {}} />);

    expect(screen.getByRole('button', { name: 'Select' })).toBeInTheDocument();
    expect(screen.getByRole('button', { name: 'Draw polygon' })).toBeInTheDocument();
    expect(screen.getByRole('button', { name: 'Draw circle' })).toBeInTheDocument();
  });

  it('marks idle as active when no tool is armed', () => {
    render(<MapDrawToolbar active={null} onChange={() => {}} />);
    expect(screen.getByRole('button', { name: 'Select' })).toHaveAttribute('aria-pressed', 'true');
  });

  it('arms a tool', () => {
    const onChange = vi.fn();
    render(<MapDrawToolbar active={null} onChange={onChange} />);

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

  it('disarms when the armed tool is clicked again', () => {
    const onChange = vi.fn();
    render(<MapDrawToolbar active="polygon" onChange={onChange} />);

    fireEvent.click(screen.getByRole('button', { name: 'Draw polygon' }));
    expect(onChange).toHaveBeenCalledWith(null);
  });

  it('returns to idle explicitly', () => {
    const onChange = vi.fn();
    render(<MapDrawToolbar active="circle" onChange={onChange} />);

    // A drawing mode nobody can see they are in is how stray shapes get made.
    fireEvent.click(screen.getByRole('button', { name: 'Select' }));
    expect(onChange).toHaveBeenCalledWith(null);
  });

  it('honours a custom mode set', () => {
    render(<MapDrawToolbar active={null} onChange={() => {}} modes={['rectangle']} />);

    expect(screen.getByRole('button', { name: 'Draw rectangle' })).toBeInTheDocument();
    expect(screen.queryByRole('button', { name: 'Draw circle' })).not.toBeInTheDocument();
  });
});