import {Component, computed} from '@angular/core';
import {MatDivider} from '@angular/material/divider';
import {
  MatAccordion,
  MatExpansionPanel,
  MatExpansionPanelHeader,
  MatExpansionPanelTitle,
} from '@angular/material/expansion';
import {gmmUtils} from '@ghsc/nshmp-lib-ng/gmm';
import {NshmpLibNgAppMetadataComponent} from '@ghsc/nshmp-lib-ng/nshmp';
import {
  NshmpLibNgPlotComponent,
  NshmpLibNgPlotsContainerComponent,
} from '@ghsc/nshmp-lib-ng/plot';
import {PlotlyPlot} from '@ghsc/nshmp-utils-ts/libs/plotly';
import {PlotData} from 'plotly.js';

import {AppService} from '../../services/app.service';
import {ParameterSummaryComponent} from '../parameter-summary/parameter-summary.component';

/**
 * Ground motion response spectra mean and sigma plots.
 */
@Component({
  imports: [
    NshmpLibNgPlotsContainerComponent,
    NshmpLibNgPlotComponent,
    NshmpLibNgAppMetadataComponent,
    MatAccordion,
    MatExpansionPanel,
    MatExpansionPanelHeader,
    MatExpansionPanelTitle,
    MatDivider,
    ParameterSummaryComponent,
  ],
  selector: 'app-plots',
  styleUrl: './plots.component.scss',
  templateUrl: './plots.component.html',
})
export class PlotsComponent {
  /** Sigma plot data */
  sigmaPlotData = computed(() =>
    this.filterData(this.service.sigmaPlotState().plotData),
  );

  /** Response spectra plot data */
  spectraPlotData = computed(() => ({
    ...this.filterData(this.service.spectraPlotState().plotData),
  }));

  /** Repo metadata */
  repositories = computed(() => this.service.usage()?.metadata?.repositories);

  constructor(private service: AppService) {}

  /**
   * Don't plot PGV values.
   *
   * @param plot The plot
   */
  private filterData(plot: PlotlyPlot): PlotlyPlot {
    const data = plot.data.map(data => {
      const iPgv = data.x.findIndex(x => x === gmmUtils.XS_PGV);
      const plotData: Partial<PlotData> = {
        ...data,
        x: [...data.x] as number[],
        y: [...data.y] as number[],
      };

      if (iPgv !== -1) {
        this.splicePgv(plotData.x as number[], iPgv);
        this.splicePgv(plotData.y as number[], iPgv);
        this.splicePgv(plotData.hovertemplate as string[], iPgv);
        this.splicePgv(plotData.marker.symbol as string[], iPgv);
      }

      return plotData;
    });

    return {
      ...plot,
      data,
    };
  }

  private splicePgv<T>(data: T[], iPgv: number): void {
    if (Array.isArray(data)) {
      data.splice(iPgv, 1);
    }
  }
}