import {LowerCasePipe} from '@angular/common';
import {Component, computed, ViewEncapsulation} from '@angular/core';
import {MatTab, MatTabContent, MatTabGroup} from '@angular/material/tabs';
import {hazardUtils} from '@ghsc/nshmp-lib-ng/hazard';
import {NshmpDataTablePanelComponent} from '@ghsc/nshmp-lib-ng/nshmp';
import {plotUtils} from '@ghsc/nshmp-lib-ng/plot';
import {Imt, imtToString} from '@ghsc/nshmp-utils-ts/libs/nshmp-lib/gmm';
import {PlotData} from 'plotly.js';

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

/**
 * Main content for application with tabs:
 *  - Plots tab: show dynamic hazard plots
 *  - Hazard data tab: table of hazard data
 *  - Spectra data tab: table of spectra data
 */
@Component({
  encapsulation: ViewEncapsulation.None,
  imports: [
    NshmpDataTablePanelComponent,
    MatTabGroup,
    MatTab,
    MatTabContent,
    PlotsComponent,
    LowerCasePipe,
  ],
  selector: 'app-content',
  styleUrl: './content.component.scss',
  templateUrl: './content.component.html',
})
export class ContentComponent {
  /** Whether there is data */
  hasData = computed(() => this.service.serviceResponse() !== null);

  /** Hazard table data */
  hazardTableData = computed(() => {
    const plot = this.service.hazardPlotState();
    const data = [...plot.plotData.data];
    // Remove return period from data
    data.shift();

    return plotUtils.plotDataToTableData(
      {
        ...plot,
        plotData: {
          ...plot.plotData,
          data,
        },
      },
      {
        addLabel: true,
        labelTransform: label => (label in Imt ? imtToString(label as Imt) : label),
        xLabelTransform: (label: string, data: Partial<PlotData>) =>
          data?.name === Imt.PGV.toString() ? label.replace('(g)', '(cm/s)') : label,
        xValueFormat: (x: number) => x.toFixed(4),
        yValueFormat: (y: number) => y.toExponential(4),
      },
    );
  });

  /** Spectra table data */
  spectraTableData = computed(() =>
    hazardUtils.responseSpectraToTableData(this.service.responseSpectra()),
  );

  constructor(public service: AppService) {}

  /** Filename for hazard export CSV */
  hazardFilename(): string {
    const {sourceType, vs30} = this.service.formGroup.getRawValue();

    return `hazard-curves-${sourceType}-${vs30}.csv`;
  }

  /** Filename for spectra export CSV */
  spectraFilename(): string {
    const {sourceType, vs30} = this.service.formGroup.getRawValue();

    return `response-spectra-${sourceType}-${vs30}.csv`;
  }
}