import { Component, computed, inject } from '@angular/core';

import { findMenu } from '../../../../../../core/services/menu.utils';
import { TenantService } from '../../../../../../core/services/tenant.service';
import { AccordionItemComponent } from '../../../../../../shared/components/accordion/accordion-item.component';
import { AccordionComponent } from '../../../../../../shared/components/accordion/accordion.component';
import { MenuContentSectionComponent } from '../../../../components/menu-content-section/menu-content-section.component';

type Faq = {
  question: string;
  answer: string;
};

@Component({
  selector: 'app-faq-page',
  imports: [AccordionComponent, AccordionItemComponent, MenuContentSectionComponent],
  templateUrl: './faq-page.html',
  styleUrl: './faq-page.scss',
})
export class FaqPage {
  private readonly tenantService = inject(TenantService);

  protected readonly faqs = computed(() => {
    const staticContent = findMenu(
      this.tenantService.tenant()?.menues ?? [],
      'help.faq',
    )?.static_content;

    if (!Array.isArray(staticContent)) {
      return [];
    }

    return staticContent.flatMap((item): Faq[] => {
      if (
        typeof item !== 'object' ||
        item === null ||
        !('pregunta' in item) ||
        !('respuesta' in item) ||
        typeof item.pregunta !== 'string' ||
        typeof item.respuesta !== 'string'
      ) {
        return [];
      }

      return [{ question: item.pregunta, answer: item.respuesta }];
    });
  });
}
