import React from 'react';
import {render, screen} 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('../CarouselAfficheEnsembleEvenementClient', () => ({__esModule: true, default: ({data}: {data: unknown[]}) => <div data-testid="carousel" data-count={data.length} />}));

import EditionsEnsemble from '../EditionsEnsemble';

const edition = (eesId: number, eesLibelle: string, logoUrl: string | null, nbEvent?: number) => ({eesId, eesLibelle, logoUrl, nbEvent});

describe('EditionsEnsemble', () => {
  it('shouldShowAGridOfClickableLogosWithTheEventCount', () => {
    render(<EditionsEnsemble locale="fr" titleKey="title_children" editions={[edition(81, 'Édition 2026', 'https://media.test/2026.png', 12), edition(80, 'Édition 2025', null, 0)]} />);

    expect(screen.getByRole('heading', {level: 2})).toHaveTextContent('title_children');
    expect(screen.getByRole('link', {name: /Édition 2026/})).toHaveAttribute('href', '/fr/festivite/81/edition-2026');
    expect(screen.getByRole('img', {name: 'Édition 2026'})).toHaveAttribute('src', 'https://media.test/2026.png');
    expect(screen.getByText('edition_events:12')).toBeInTheDocument();
    expect(screen.getByRole('link', {name: /Édition 2025/}).querySelector('img')).toBeNull();
  });

  it('shouldSwitchToACarouselWhenThereAreManyEditions', () => {
    render(<EditionsEnsemble locale="fr" titleKey="title_parents" editions={[1, 2, 3, 4, 5].map((i) => edition(i, `Édition ${i}`, null))} />);

    expect(screen.getByTestId('carousel')).toHaveAttribute('data-count', '5');
  });

  it('shouldRenderNothingWithoutEditions', () => {
    const {container} = render(<EditionsEnsemble locale="fr" titleKey="title_parents" editions={[]} />);

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