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

jest.mock('next-intl', () => ({useTranslations: () => (key: string) => key}));
jest.mock('next/link', () => ({__esModule: true, default: ({children, href, ...rest}: {children: React.ReactNode; href: string}) => <a href={href} {...rest}>{children}</a>}));

import PratiquantsDiscipline from '../PratiquantsDiscipline';

const instruments = [
  {insId: 3, insNom: 'Bombarde', pratiquants: [
    {aenId: 5, aenLibelle: 'Anna Le Goff', photoUrl: 'https://media.test/anna.jpg', groupes: [{fmuId: 9, aenLibelle: 'Startijenn'}, {fmuId: 10, aenLibelle: 'Kreiz Breizh Akademi'}]},
    {aenId: 6, aenLibelle: 'Yann Le Meur', photoUrl: null, groupes: []},
  ]},
  {insId: 4, insNom: 'Biniou kozh', pratiquants: []},
];

describe('PratiquantsDiscipline', () => {
  it('shouldListEachInstrumentWithItsActivePlayersLinkedToTheirPagesAndBands', () => {
    render(<PratiquantsDiscipline instruments={instruments} locale="fr" />);

    expect(screen.getByRole('heading', {level: 2})).toHaveTextContent('artistes_title');
    const bombarde = screen.getByRole('heading', {level: 3, name: 'Bombarde'}).closest('section') as HTMLElement;
    expect(within(bombarde).getByRole('link', {name: /Anna Le Goff/})).toHaveAttribute('href', '/fr/personne/5/anna-le-goff');
    expect(within(bombarde).getByRole('img', {name: 'Anna Le Goff'})).toHaveAttribute('src', 'https://media.test/anna.jpg');
    expect(within(bombarde).getByRole('link', {name: 'Startijenn'})).toHaveAttribute('href', '/fr/groupes/9');
    expect(within(bombarde).getByRole('link', {name: 'Kreiz Breizh Akademi'})).toHaveAttribute('href', '/fr/groupes/10');
    expect(within(bombarde).getByRole('link', {name: /Yann Le Meur/})).toHaveAttribute('href', '/fr/personne/6/yann-le-meur');
    const biniou = screen.getByRole('heading', {level: 3, name: 'Biniou kozh'}).closest('section') as HTMLElement;
    expect(within(biniou).getByText('no_pratiquants')).toBeInTheDocument();
  });

  it('shouldRenderNothingWithoutInstrument', () => {
    const {container} = render(<PratiquantsDiscipline instruments={[]} locale="fr" />);

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