import React from 'react';
import {render, screen} from '@testing-library/react';

jest.mock('next-intl', () => ({useTranslations: () => (key: string) => key}));
jest.mock('@/components/global/CarteLeafLetMultiMarker', () => ({
  __esModule: true,
  default: ({lieux, positionMap, zoomMap}: {lieux: {title: string; position: number[]; ville: string; href?: string}[]; positionMap: number[]; zoomMap: number}) => (
    <div
      data-testid="carte"
      data-count={lieux.length}
      data-titles={lieux.map((l) => l.title).join('|')}
      data-villes={lieux.map((l) => l.ville).join('|')}
      data-positions={lieux.map((l) => l.position.join(',')).join('|')}
      data-hrefs={lieux.map((l) => l.href).join('|')}
      data-center={positionMap.join(',')}
      data-zoom={zoomMap}
    />
  ),
}));

import EpciActeursMap from '../EpciActeursMap';

const acteurs = [
  {aenId: 1, aenLibelle: 'Anna Le Goff', type: 'artiste' as const, cibleId: 1, geoX: 47.99, geoY: -4.1, vilNom: 'Quimper'},
  {aenId: 5, aenLibelle: 'Bagad Kemper', type: 'groupe' as const, cibleId: 9, geoX: 48.02, geoY: -4.05, vilNom: 'Ergué-Gabéric'},
];

describe('EpciActeursMap', () => {
  it('shouldPlaceEachActiveActorAndLinkItToItsOwnPage', () => {
    render(<EpciActeursMap locale="fr" carte={{suaId: 3, centre: {geoX: 48, geoY: -4.1, zoom: 10}, acteurs}} />);

    const carte = screen.getByTestId('carte');
    expect(carte).toHaveAttribute('data-count', '2');
    expect(carte).toHaveAttribute('data-titles', 'Anna Le Goff|Bagad Kemper');
    expect(carte).toHaveAttribute('data-villes', 'Quimper|Ergué-Gabéric');
    expect(carte).toHaveAttribute('data-positions', '47.99,-4.1|48.02,-4.05');
    expect(carte).toHaveAttribute('data-hrefs', '/fr/personne/1/anna-le-goff|/fr/groupes/9');
    expect(carte).toHaveAttribute('data-center', '48,-4.1');
    expect(carte).toHaveAttribute('data-zoom', '10');
    expect(screen.getByRole('heading', {level: 2})).toHaveTextContent('map_title');
  });

  it('shouldCenterOnTheFirstActorWithoutAKnownCenter', () => {
    render(<EpciActeursMap locale="fr" carte={{suaId: 3, centre: null, acteurs}} />);

    const carte = screen.getByTestId('carte');
    expect(carte).toHaveAttribute('data-center', '47.99,-4.1');
    expect(carte).toHaveAttribute('data-zoom', '10');
  });

  it('shouldRenderNothingWithoutActiveActor', () => {
    const {container} = render(<EpciActeursMap locale="fr" carte={{suaId: 3, centre: null, acteurs: []}} />);

    expect(container).toBeEmptyDOMElement();
  });
});