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[]}[]; positionMap: number[]; zoomMap: number}) => (
    <div data-testid="carte" data-count={lieux.length} data-titles={lieux.map(l => l.title).join('|')} data-center={positionMap.join(',')} data-zoom={zoomMap} />
  ),
}));

import VillePlacesMap from '../VillePlacesMap';

const ville = {vilNom: 'Quimper', vilGeoX: 47.99, vilGeoY: -4.1, vilGeoZoom: 12};

describe('VillePlacesMap', () => {
  it('shouldPlaceTheCityAndEveryGeolocatedPlace', () => {
    render(
      <VillePlacesMap
        locale="fr"
        ville={ville}
        places={[
          {plaId: 1, plaLibelle: 'Salle du Chapeau Rouge', plaAdresse1: '1 rue du Paradis', plaAdresse2: '', plaCodepostal: '29000', plaGeoX: 47.995, plaGeoY: -4.11},
          {plaId: 2, plaLibelle: 'Salle sans coordonnées', plaAdresse1: '', plaAdresse2: '', plaCodepostal: '', plaGeoX: null, plaGeoY: null},
        ]}
      />
    );

    const carte = screen.getByTestId('carte');
    expect(carte).toHaveAttribute('data-count', '2');
    expect(carte).toHaveAttribute('data-titles', 'Quimper|Salle du Chapeau Rouge');
    expect(carte).toHaveAttribute('data-center', '47.99,-4.1');
    expect(carte).toHaveAttribute('data-zoom', '12');
    expect(screen.getByRole('heading', {level: 2})).toHaveTextContent('places_map_title');
  });

  it('shouldRenderNothingWhenNoPlaceIsGeolocated', () => {
    const {container} = render(
      <VillePlacesMap locale="fr" ville={ville} places={[{plaId: 2, plaLibelle: 'Salle', plaAdresse1: '', plaAdresse2: '', plaCodepostal: '', plaGeoX: null, plaGeoY: null}]} />
    );

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