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

jest.mock('next-intl', () => ({
  useTranslations: () => (key: string, values?: Record<string, unknown>) => (values ? `${key}:${Object.values(values).join('/')}` : key),
}));
jest.mock('next/link', () => ({
  __esModule: true,
  default: ({children, href, ...rest}: {children: React.ReactNode; href: string}) => <a href={href} {...rest}>{children}</a>,
}));
jest.mock('@/services/villeService', () => ({
  getVilleActeurs: jest.fn(),
}));
jest.mock('@/services/epciService', () => ({
  getEpciActeurs: jest.fn(),
}));

import ActeursVille from '../ActeursVille';
import {getVilleActeurs} from '@/services/villeService';
import {getEpciActeurs} from '@/services/epciService';

const acteurs = [
  {aenId: 1, aenLibelle: 'Anna Le Goff', actif: true, photoUrl: null, type: 'artiste' as const, cibleId: 1, listes: []},
  {aenId: 5, aenLibelle: 'Bagad Kemper', actif: true, photoUrl: 'https://media.test/bagad.jpg', type: 'groupe' as const, cibleId: 9, listes: [{lieId: 3, lieNom: 'Bagadoù'}, {lieId: 6, lieNom: 'Musique à danser'}]},
  {aenId: 7, aenLibelle: 'Cercle celtique', actif: true, photoUrl: null, type: 'ensemble' as const, cibleId: 12, listes: []},
  {aenId: 8, aenLibelle: 'Dañs Kemper', actif: false, photoUrl: null, type: 'annuaire' as const, cibleId: 8, listes: []},
];

describe('ActeursVille', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  it('shouldLinkEachActorToItsOwnKindOfPage', () => {
    render(<ActeursVille cible={{type: 'ville', id: '361'}} locale="fr" initial={{total: 4, page: 1, itemsPerPage: 12, items: acteurs}} />);

    expect(screen.getByRole('link', {name: /Anna Le Goff/})).toHaveAttribute('href', '/fr/personne/1/anna-le-goff');
    expect(screen.getByRole('link', {name: /Bagad Kemper/})).toHaveAttribute('href', '/fr/groupes/9');
    expect(screen.getByRole('link', {name: /Cercle celtique/})).toHaveAttribute('href', '/fr/ensembles-traditionnels/12');
    expect(screen.getByRole('link', {name: /Dañs Kemper/})).toHaveAttribute('href', '/fr/annuaire_entree/8/dans-kemper');
  });

  it('shouldShowThePhotoTheActivityAndTheClickableLists', () => {
    render(<ActeursVille cible={{type: 'ville', id: '361'}} locale="fr" initial={{total: 4, page: 1, itemsPerPage: 12, items: acteurs}} />);

    expect(screen.getByRole('img', {name: 'Bagad Kemper'})).toHaveAttribute('src', 'https://media.test/bagad.jpg');
    expect(screen.getAllByTestId('acteur-sans-photo')).toHaveLength(3);
    expect(screen.getAllByText('active')).toHaveLength(3);
    expect(screen.getByText('inactive')).toBeInTheDocument();
    expect(screen.getByRole('link', {name: 'Bagadoù'})).toHaveAttribute('href', '/fr/listes/3');
    expect(screen.getByRole('link', {name: 'Musique à danser'})).toHaveAttribute('href', '/fr/listes/6');
    expect(screen.queryByRole('navigation', {name: 'pagination'})).not.toBeInTheDocument();
  });

  it('shouldPaginateWhenTheActorsAreNumerous', async () => {
    (getVilleActeurs as jest.Mock).mockResolvedValue({total: 30, page: 2, itemsPerPage: 12, items: [{...acteurs[0], aenId: 99, aenLibelle: 'Page deux', cibleId: 99}]});
    render(<ActeursVille cible={{type: 'ville', id: '361'}} locale="fr" initial={{total: 30, page: 1, itemsPerPage: 12, items: acteurs}} />);

    const pagination = screen.getByRole('navigation', {name: 'pagination'});
    expect(pagination).toHaveTextContent('page_of:1/3');
    expect(screen.getByRole('button', {name: 'previous_page'})).toBeDisabled();
    fireEvent.click(screen.getByRole('button', {name: 'next_page'}));

    await waitFor(() => expect(getVilleActeurs).toHaveBeenCalledWith('361', 2, 12));
    expect(await screen.findByText('Page deux')).toBeInTheDocument();
    expect(screen.queryByText('Anna Le Goff')).not.toBeInTheDocument();
    expect(pagination).toHaveTextContent('page_of:2/3');
    expect(screen.getByRole('button', {name: 'previous_page'})).toBeEnabled();
  });

  it('shouldPaginateAnEpciThroughTheEpciService', async () => {
    (getEpciActeurs as jest.Mock).mockResolvedValue({total: 30, page: 2, itemsPerPage: 12, items: [{...acteurs[0], aenId: 99, aenLibelle: 'Page deux', cibleId: 99}]});
    render(<ActeursVille cible={{type: 'epci', id: '3'}} locale="fr" initial={{total: 30, page: 1, itemsPerPage: 12, items: acteurs}} />);

    fireEvent.click(screen.getByRole('button', {name: 'next_page'}));

    await waitFor(() => expect(getEpciActeurs).toHaveBeenCalledWith('3', 2, 12));
    expect(getVilleActeurs).not.toHaveBeenCalled();
    expect(await screen.findByText('Page deux')).toBeInTheDocument();
  });

  it('shouldRenderNothingWithoutActors', () => {
    const {container} = render(<ActeursVille cible={{type: 'ville', id: '361'}} locale="fr" initial={{total: 0, page: 1, itemsPerPage: 12, items: []}} />);

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