import {Component, computed} from '@angular/core';
import {MatTab, MatTabContent, MatTabGroup} from '@angular/material/tabs';
import {gmmUtils} from '@ghsc/nshmp-lib-ng/gmm';
import {NshmpLibNgDataTablePanelComponent} from '@ghsc/nshmp-lib-ng/nshmp';

import {AppService} from '../../services/app.service';
import {PlotsComponent} from '../plots/plots.component';

/**
 * Application main content with Angular material tabs with:
 *  - Plots tab: GMM vs distance plot
 *  - Data tab: table with GMM vs distance data
 */
@Component({
  imports: [
    MatTabGroup,
    MatTab,
    MatTabContent,
    PlotsComponent,
    NshmpLibNgDataTablePanelComponent,
  ],
  selector: 'app-content',
  styleUrl: './content.component.scss',
  templateUrl: './content.component.html',
})
export class ContentComponent {
  /** Whether the data has common X values */
  commonXValues = true;
  /** Whether data is shown is exponential form */
  exp = true;

  /** Whether service has been called and data exists */
  hasData = computed(() => this.service.serviceResponse()?.length > 0);

  /** Table data for table */
  table = computed(() =>
    gmmUtils.plotToTable(
      this.service.meanPlotState().plotData,
      this.exp,
      this.commonXValues,
    ),
  );

  constructor(public service: AppService) {}
}