import React from 'react';
import {render, screen, waitFor} from '@testing-library/react';
import MemberEventsSectionHomepage from '../MemberEventsSectionHomepage';
import {getUpcomingEvents} from '@/services/evenementService';

jest.mock('@/services/evenementService');
jest.mock('next/link', () => {
  return ({children, href, ...props}: {children: React.ReactNode; href: string; [key: string]: unknown}) => (
    <a href={href} {...props}>{children}</a>
  );
});

const mockedGetUpcomingEvents = getUpcomingEvents as jest.MockedFunction<typeof getUpcomingEvents>;

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

  it('shouldFetchAndRenderMemberEvents', async () => {
    mockedGetUpcomingEvents.mockResolvedValue([
      {
        eveId: 1,
        eveDate: '2026-03-15',
        eveHeure: '20h30',
        eveLibelle: 'Fest-noz Quimper',
        eveTev: {tevLibelle: 'Fest-noz'},
        eveVil: {vilNom: 'Quimper', vilCodepostal: '29000', vilGeoX: -4.1, vilGeoY: 48.0, vilGeoZoom: 12},
        evePla: null,
        aenOrganisateurs: []
      }
    ]);

    render(<MemberEventsSectionHomepage locale="fr" />);

    await waitFor(() => {
      expect(screen.getByText('Fest-noz Quimper')).toBeInTheDocument();
    });

    expect(mockedGetUpcomingEvents).toHaveBeenCalledWith({itemsPerPage: 6});
  });

  it('shouldShowLoadingState', () => {
    mockedGetUpcomingEvents.mockImplementation(() => new Promise(() => {}));

    const {container} = render(<MemberEventsSectionHomepage locale="fr" />);

    const loading = container.querySelector('.member-events__loading');
    expect(loading).toBeInTheDocument();
  });
});