import {Component, computed} from '@angular/core';
import {MatAccordion} from '@angular/material/expansion';
import {PlotTableDataParams, 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 {Plots} from '../../models/state.model';
import {AppService} from '../../services/app.service';
import {TableDataPanelComponent} from '../table-data-panel/table-data-panel.component';

/**
 * Component with tables for hazard data.
 */
@Component({
  imports: [MatAccordion, TableDataPanelComponent],
  selector: 'app-hazard-data',
  styleUrl: './hazard-data.component.scss',
  templateUrl: './hazard-data.component.html',
})
export class HazardDataComponent {
  /** Hazard components plot data */
  private hazardComponentsPlot = this.service
    .plots()
    .get(Plots.HAZARD_COMPONENTS);

  /** Hazard % diff plot data */
  private hazardDiffPlot = this.service.plots().get(Plots.HAZARD_DIFFERENCES);

  /** Hazard plot data */
  private hazardPlot = this.service.plots().get(Plots.HAZARD);

  /** Table data parameters */
  private tableParams: PlotTableDataParams = {
    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),
  };

  /** Model values */
  private models = `${this.service.formGroup.getRawValue().model}-${this.service.formGroup.getRawValue().modelCompare}`;

  /** Filename for hazard components export CSV */
  hazardComponentsFilename = `hazard-components-${this.models}.csv`;

  /** Filename for hazard export CSV */
  hazardFilename = `hazard-compare-${this.models}.csv`;

  /** Filename for hazard difference export CSV */
  hazardDiffFilename = `hazard-%-diff-${this.models}.csv`;

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

    return plotUtils.plotDataToTableData(
      {
        ...this.hazardPlot,
        plotData: {
          ...this.hazardPlot.plotData,
          data,
        },
      },
      this.tableParams,
    );
  });

  /** Hazard difference table data */
  hazardDiffTableData = computed(() =>
    plotUtils.plotDataToTableData(this.hazardDiffPlot, this.tableParams),
  );

  /** Hazard components table data */
  hazardComponentsTableData = computed(() => {
    const data = [...this.hazardComponentsPlot.plotData.data];
    // Remove return period from data
    data.shift();

    return plotUtils.plotDataToTableData(
      {
        ...this.hazardComponentsPlot,
        plotData: {
          ...this.hazardComponentsPlot.plotData,
          data,
        },
      },
      this.tableParams,
    );
  });

  constructor(private service: AppService) {}
}