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

jest.mock('@/components/global/CarteLeafletSingleClient', () => ({
  __esModule: true,
  default: ({position, zoom, lieuName, lieuAdresse}: {position: number[]; zoom: number; lieuName: string; lieuAdresse: string}) => (
    <div data-testid="carte" data-position={position.join(',')} data-zoom={zoom} data-name={lieuName} data-adresse={lieuAdresse} />
  ),
}));

import FicheMap from '../FicheMap';

const quimper = {vilId: 5, vilNom: 'Quimper', vilGeoX: 47.996, vilGeoY: -4.102, vilGeoZoom: 12};

describe('FicheMap', () => {
  it.each([
    ['sans ville', undefined],
    ['ville sans coordonnées', {vilId: 5, vilNom: 'Quimper'}],
    ['ville avec une seule coordonnée', {vilId: 5, vilNom: 'Quimper', vilGeoX: 47.9}],
  ])('shouldRenderNothing %s', (_label, ville) => {
    render(<FicheMap libelle="Bagad Kemper" ville={ville} />);

    expect(screen.queryByTestId('map-section')).not.toBeInTheDocument();
  });

  it('shouldCenterTheMapOnTheVilleWithTheAddressInThePopup', () => {
    render(<FicheMap libelle="Bagad Kemper" ville={quimper} adresse={['12 rue de la Cité', null, '']} />);

    const carte = screen.getByTestId('carte');
    expect(screen.getByTestId('map-section')).toHaveTextContent('map_title');
    expect(carte).toHaveAttribute('data-position', '47.996,-4.102');
    expect(carte).toHaveAttribute('data-zoom', '12');
    expect(carte).toHaveAttribute('data-name', 'Bagad Kemper');
    expect(carte).toHaveAttribute('data-adresse', '12 rue de la Cité, Quimper');
  });

  it('shouldUseTheVilleNameWhenTheAddressIsUnknown', () => {
    render(<FicheMap libelle="Bagad Kemper" ville={{...quimper, vilGeoZoom: undefined}} />);

    const carte = screen.getByTestId('carte');
    expect(carte).toHaveAttribute('data-adresse', 'Quimper');
    expect(carte).toHaveAttribute('data-zoom', '13');
  });
});