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

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

const mockPush = jest.fn();
jest.mock('next/navigation', () => ({
  useRouter: () => ({push: mockPush}),
}));

jest.mock('framer-motion', () => ({
  motion: {
    div: ({children, ...props}: React.HTMLAttributes<HTMLDivElement>) => <div {...props}>{children}</div>,
  },
}));

const mockDpr = [
  {dprId: '1', dprNom: 'Musique'},
  {dprId: '2', dprNom: 'Danse'},
];

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

  it('shouldRenderTitleLinesAndLead', () => {
    render(<HeroSection locale="fr" dpr={mockDpr} />);
    expect(screen.getByText('hero_title_line1')).toBeInTheDocument();
    expect(screen.getByText('hero_title_line2')).toBeInTheDocument();
    expect(screen.getByText('hero_lead')).toBeInTheDocument();
  });

  it('shouldRenderBretonGhostWord', () => {
    render(<HeroSection locale="fr" dpr={mockDpr} />);
    expect(screen.getByText(/Degemer mat/)).toBeInTheDocument();
  });

  it('shouldRenderThreeSearchFields', () => {
    render(<HeroSection locale="fr" dpr={mockDpr} />);
    expect(screen.getByLabelText('search_what')).toBeInTheDocument();
    expect(screen.getByLabelText('search_when')).toBeInTheDocument();
    expect(screen.getByLabelText('search_where')).toBeInTheDocument();
  });

  it('shouldListDisciplinesInWhatSelect', () => {
    render(<HeroSection locale="fr" dpr={mockDpr} />);
    const whatSelect = screen.getByLabelText('search_what');
    expect(whatSelect).toContainHTML('Musique');
    expect(whatSelect).toContainHTML('Danse');
  });

  it('shouldDefaultWhenToCurrentWeek', () => {
    render(<HeroSection locale="fr" dpr={mockDpr} />);
    expect(screen.getByLabelText('search_when')).toHaveValue('currentWeek');
  });

  it('shouldNavigateToAgendaWithSelectedFilters', () => {
    render(<HeroSection locale="fr" dpr={mockDpr} />);
    fireEvent.change(screen.getByLabelText('search_what'), {target: {value: '2'}});
    fireEvent.change(screen.getByLabelText('search_when'), {target: {value: 'next10Days'}});
    fireEvent.change(screen.getByLabelText('search_where'), {target: {value: 'Quimper'}});
    fireEvent.submit(screen.getByRole('search'));
    expect(mockPush).toHaveBeenCalledWith('/fr/evenements?tev=2&when=next10Days&q=Quimper');
  });

  it('shouldNavigateWithOnlyDefaultWhenWhenNothingSelected', () => {
    render(<HeroSection locale="fr" dpr={mockDpr} />);
    fireEvent.submit(screen.getByRole('search'));
    expect(mockPush).toHaveBeenCalledWith('/fr/evenements?when=currentWeek');
  });

  it('shouldPreselectTheDomainOnADomainHome', () => {
    render(<HeroSection locale="fr" dpr={mockDpr} domaineId={2} />);

    expect((screen.getByLabelText('search_what') as HTMLSelectElement).value).toBe('2');
  });
});