import { Component, signal } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { describe, expect, it } from 'vitest';

import { Tenant } from '../../../../core/services/tenant.interface';
import { TenantService } from '../../../../core/services/tenant.service';
import { MenuContentSectionComponent } from './menu-content-section.component';

@Component({
  imports: [MenuContentSectionComponent],
  template: `
    <app-menu-content-section menuCode="help.contact" titleId="contact-title">
      <a menuContentPrefix href="/ayuda">Volver</a>
      <p>Contenido proyectado</p>
    </app-menu-content-section>
  `,
})
class TestHostComponent {}

describe('MenuContentSectionComponent', () => {
  it('renders an accessible title and projects its content', async () => {
    const tenant = signal({
      menues: [
        {
          id: 1,
          code: 'help.contact',
          label: 'Contacto del comercio',
          parent_menu_code: 'help',
          content_type: 'static',
          route: '/ayuda/contacto',
          submenues: [],
        },
      ],
    } as unknown as Tenant);

    await TestBed.configureTestingModule({
      imports: [TestHostComponent],
      providers: [{ provide: TenantService, useValue: { tenant: tenant.asReadonly() } }],
    }).compileComponents();

    const fixture = TestBed.createComponent(TestHostComponent);
    fixture.detectChanges();

    const element = fixture.nativeElement as HTMLElement;
    const section = element.querySelector('section');

    expect(section?.getAttribute('aria-labelledby')).toBe('contact-title');
    expect(element.querySelector('#contact-title')?.textContent?.trim()).toBe(
      'CONTACTO DEL COMERCIO',
    );
    expect(element.querySelector('.menu-content-section__prefix a')?.textContent).toContain(
      'Volver',
    );
    expect(element.querySelector('.menu-content-section__body')?.textContent).toContain(
      'Contenido proyectado',
    );
  });
});
