import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import React from 'react';
import { MapLegend } from './map-legend';
import { resolveScale } from '../map/map-scale';

describe('MapLegend', () => {
  const items = [
    { colorToken: '--chart-1' as const, label: 'Até 50 atendimentos' },
    { colorToken: '--chart-2' as const, label: '51 a 200 atendimentos' },
    { colorToken: '--destructive' as const, label: 'Acima de 200 atendimentos' },
  ];

  it('renders one entry per color-key item', () => {
    render(<MapLegend items={items} />);

    items.forEach(item => {
      expect(screen.getByText(item.label)).toBeInTheDocument();
    });
  });

  it('names the region with its title', () => {
    render(<MapLegend title="Atendimentos por município" items={items} />);
    expect(screen.getByRole('group', { name: 'Atendimentos por município' })).toBeInTheDocument();
  });

  it('falls back to a generic accessible name when there is no title', () => {
    render(<MapLegend items={items} />);
    expect(screen.getByRole('group', { name: 'Map legend' })).toBeInTheDocument();
  });

  describe('size key', () => {
    const scale = {
      value: 0,
      domain: [0, 900] as [number, number],
      range: [5, 22] as [number, number],
    };

    it('labels each sample with its value and unit', () => {
      render(<MapLegend sizeKey={{ values: [10, 100, 900], scale, unit: 'un.' }} />);

      expect(screen.getByText('10 un.')).toBeInTheDocument();
      expect(screen.getByText('100 un.')).toBeInTheDocument();
      expect(screen.getByText('900 un.')).toBeInTheDocument();
    });

    it('sizes each sample with the same scale the markers use', () => {
      const { container } = render(<MapLegend sizeKey={{ values: [900], scale }} />);

      const expected = resolveScale({ ...scale, value: 900 }) * 2;
      const disc = container.querySelector('li span[aria-hidden="true"]');

      expect(disc).toHaveStyle({ width: `${expected}px`, height: `${expected}px` });
    });

    it('omits the unit when none is given', () => {
      render(<MapLegend sizeKey={{ values: [42], scale }} />);
      expect(screen.getByText('42')).toBeInTheDocument();
    });

    it('renders both keys together', () => {
      render(<MapLegend items={items} sizeKey={{ values: [10, 900], scale, unit: 'un.' }} />);

      expect(screen.getByText('Até 50 atendimentos')).toBeInTheDocument();
      expect(screen.getByText('900 un.')).toBeInTheDocument();
    });
  });

  it('positions itself absolutely only in the overlay variant', () => {
    const { container: inline } = render(<MapLegend items={items} />);
    expect(inline.firstChild).not.toHaveClass('absolute');

    const { container: overlay } = render(
      <MapLegend variant="overlay" position="bottom-left" items={items} />
    );
    expect(overlay.firstChild).toHaveClass('absolute');
  });

  it('renders nothing but the frame when given no keys', () => {
    render(<MapLegend title="Legenda" />);
    expect(screen.getByRole('group', { name: 'Legenda' })).toBeEmptyDOMElement;
    expect(screen.getByText('Legenda')).toBeInTheDocument();
  });
});