import { TestBed } from '@angular/core/testing';
import { HeroBannerComponent } from './hero-banner.component';

describe('HeroBannerComponent', () => {
  it('renders desktop and mobile crop variants', async () => {
    await TestBed.configureTestingModule({ imports: [HeroBannerComponent] }).compileComponents();

    const fixture = TestBed.createComponent(HeroBannerComponent);
    fixture.componentRef.setInput('heroConfig', {
      background_image_id: {
        desktop: 'https://example.com/desktop.jpg',
        mobile: 'https://example.com/mobile.jpg',
      },
    });
    fixture.detectChanges();

    const element = fixture.nativeElement as HTMLElement;

    expect(element.querySelector('source')?.getAttribute('srcset')).toBe(
      'https://example.com/mobile.jpg',
    );
    expect(element.querySelector('img')?.getAttribute('src')).toBe(
      'https://example.com/desktop.jpg',
    );
    expect(element.querySelector('.hero-banner')?.classList).toContain(
      'hero-banner--with-media',
    );
  });

  it('keeps the fallback banner sizing when there is no image', async () => {
    await TestBed.configureTestingModule({ imports: [HeroBannerComponent] }).compileComponents();

    const fixture = TestBed.createComponent(HeroBannerComponent);
    fixture.componentRef.setInput('heroConfig', { title_html: 'Banner sin imagen' });
    fixture.detectChanges();

    const banner = (fixture.nativeElement as HTMLElement).querySelector('.hero-banner');

    expect(banner?.classList).not.toContain('hero-banner--with-media');
  });

  it('expands and collapses the event schedules', async () => {
    await TestBed.configureTestingModule({ imports: [HeroBannerComponent] }).compileComponents();

    const fixture = TestBed.createComponent(HeroBannerComponent);
    fixture.componentRef.setInput('eventConfig', {
      title: 'Fiesta Nacional del Fútbol Infantil',
      location: 'Sunchales, Santa Fe',
      dates: [
        {
          id: 1,
          date: '2026-10-09',
          start_time: '10:00:00',
          end_time: '20:30:00',
        },
        {
          id: 2,
          date: '2026-10-10',
          start_time: '10:00:00',
          end_time: '22:00:00',
        },
      ],
    });
    fixture.detectChanges();

    const element = fixture.nativeElement as HTMLElement;
    const toggle = element.querySelector<HTMLButtonElement>('.event-schedule-toggle');

    expect(toggle?.textContent).toContain('Ver horarios');
    expect(toggle?.getAttribute('aria-expanded')).toBe('false');
    expect(element.querySelector('.event-schedules')).toBeNull();

    toggle?.click();
    fixture.detectChanges();

    expect(toggle?.textContent).toContain('Ocultar horarios');
    expect(toggle?.getAttribute('aria-expanded')).toBe('true');
    expect(element.querySelectorAll('.event-schedules tbody tr')).toHaveLength(2);
    expect(element.querySelector('.event-schedules')?.textContent).toContain('9 de Octubre 2026');
    expect(element.querySelector('.event-schedules')?.textContent).toContain('10:00 - 20:30');

    toggle?.click();
    fixture.detectChanges();

    expect(element.querySelector('.event-schedules')).toBeNull();
  });
});