import {Component, computed} from '@angular/core';
import {MatTab, MatTabContent, MatTabGroup} from '@angular/material/tabs';

import {AppService} from '../../services/app.service';
import {HazardDataComponent} from '../hazard-data/hazard-data.component';
import {PlotsComponent} from '../plots/plots.component';
import {SpectraDataComponent} from '../spectra-data/spectra-data.component';

/**
 * Main content for dynamic hazard compare applications with tabs:
 *  - Plots tab: show dynamic hazard compare plots
 *  - Hazard data tab: table of hazard data
 *  - Spectra data tab: table of spectra data
 */
@Component({
  imports: [
    MatTabGroup,
    MatTab,
    MatTabContent,
    PlotsComponent,
    HazardDataComponent,
    SpectraDataComponent,
  ],
  selector: 'app-content',
  styleUrl: './content.component.scss',
  templateUrl: './content.component.html',
})
export class ContentComponent {
  /** Whether there is data */
  hasData = computed(() => {
    const {modelA, modelB} = this.service.serviceResponses();

    return (
      modelA?.hazardResponse !== undefined &&
      modelB?.hazardResponse !== undefined
    );
  });

  constructor(private service: AppService) {}
}