import {LowerCasePipe} from '@angular/common';
import {Component, computed, inject, ViewEncapsulation} from '@angular/core';
import {MatTab, MatTabContent, MatTabGroup} from '@angular/material/tabs';
import {hazardUtils} from '@ghsc/nshmp-lib-ng/hazard';
import {NshmpDataTablePanelComponent, NshmpScrollToTopComponent} from '@ghsc/nshmp-lib-ng/nshmp';
import {PlotTableDataParams} 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,
    NshmpScrollToTopComponent,
  ],
  selector: 'app-content',
  styleUrl: './content.component.scss',
  templateUrl: './content.component.html',
})
export class ContentComponent {
  service = inject(AppService);

  /** Whether there is data */
  hasData = computed(() => this.service.serviceResponse() !== null);

  /** Hazard table data */
  hazardTableData = computed(() => {
    const plot = this.service.hazardPlotState();

    return plot.toTableData({
      ...this.tableParams(),
      // Remove return period from data
      filter: (_, index) => index > 0,
    });
  });

  /** Hazard table data */
  magnitudesTableData = computed(() => {
    const plot = this.service.magnitudesPlotState();

    return plot.toTableData(this.tableParams());
  });

  /** Hazard table data */
  sourcesTableData = computed(() => {
    const plot = this.service.sourcesPlotState();
    return plot.toTableData(this.tableParams());
  });

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

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

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

  magnitudeFilename(): string {
    const {imt, model, vs30} = this.service.formGroup.getRawValue();

    return `magnitude-curves-${model}-${imt}-${vs30}.csv`;
  }

  sourcesFilename(): string {
    const {imt, model, vs30} = this.service.formGroup.getRawValue();

    return `sources-curves-${model}-${imt}-${vs30}.csv`;
  }

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

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

  private tableParams(): PlotTableDataParams {
    return {
      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),
    };
  }
}