import {NgClass} from '@angular/common';
import {Component, computed, Signal} from '@angular/core';
import {MatDivider} from '@angular/material/divider';
import {
  MatAccordion,
  MatExpansionPanel,
  MatExpansionPanelHeader,
  MatExpansionPanelTitle,
} from '@angular/material/expansion';
import {NshmpLibNgHazardDesignCodeWarningComponent} from '@ghsc/nshmp-lib-ng/hazard';
import {NshmpLibNgAppMetadataComponent} from '@ghsc/nshmp-lib-ng/nshmp';
import {
  NshmpLibNgPlotComponent,
  NshmpLibNgPlotsContainerComponent,
} from '@ghsc/nshmp-lib-ng/plot';
import {HeaderService} from '@ghsc/nshmp-template';
import {PlotlyPlot} from '@ghsc/nshmp-utils-ts/libs/plotly';

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

/**
 * The plot info for an expansion panel
 */
interface PlotInfo {
  /** Main plot data */
  plotData: Signal<PlotlyPlot>;
  /** Expansion panel title */
  title: string;

  /** % diff plot data */
  diffPlotData?: Signal<PlotlyPlot>;
}

/**
 * Dynamic hazard compare application plots.
 */
@Component({
  imports: [
    NshmpLibNgPlotsContainerComponent,
    NshmpLibNgHazardDesignCodeWarningComponent,
    NshmpLibNgAppMetadataComponent,
    NshmpLibNgPlotComponent,
    NgClass,
    MatAccordion,
    MatExpansionPanel,
    MatExpansionPanelHeader,
    MatExpansionPanelTitle,
    MatDivider,
    ParameterSummaryComponent,
  ],
  selector: 'app-plots',
  styleUrl: './plots.component.scss',
  templateUrl: './plots.component.html',
})
export class PlotsComponent {
  /** Hazard plot data */
  private hazardPlotData = computed(
    () => this.service.plots().get(Plots.HAZARD).plotData,
  );

  /** Hazard components plot data */
  private hazardComponentsPlotData = computed(
    () => this.service.plots().get(Plots.HAZARD_COMPONENTS).plotData,
  );

  /** Hazard % diff plot data */
  private hazardDiffPlotData = computed(
    () => this.service.plots().get(Plots.HAZARD_DIFFERENCES).plotData,
  );

  /** Spectra components plot data */
  private spectraComponentsPlotData = computed(
    () => this.service.plots().get(Plots.SPECTRUM_COMPONENTS).plotData,
  );

  /** Spectra % diff plot data */
  private spectraDiffPlotData = computed(
    () => this.service.plots().get(Plots.SPECTRUM_DIFFERENCES).plotData,
  );

  /** Spectra plot data */
  private spectraPlotData = computed(
    () => this.service.plots().get(Plots.SPECTRUM).plotData,
  );

  /** Wheather both the control and settings panels are closed */
  panelsClosed = computed(
    () =>
      !this.headerService.controlPanelSelected() &&
      !this.headerService.settingsSelected(),
  );

  /** Wheather both the control and settings panels are opened */
  panelsOpened = computed(
    () =>
      this.headerService.controlPanelSelected() &&
      this.headerService.settingsSelected(),
  );

  /** The plots */
  plots: PlotInfo[] = [
    {
      diffPlotData: this.hazardDiffPlotData,
      plotData: this.hazardPlotData,
      title: 'Hazard Curves',
    },
    {
      diffPlotData: this.spectraDiffPlotData,
      plotData: this.spectraPlotData,
      title: 'Spectra',
    },
    {
      plotData: this.hazardComponentsPlotData,
      title: 'Hazard Components',
    },
    {
      plotData: this.spectraComponentsPlotData,
      title: 'Spectra Components',
    },
  ];

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

  constructor(
    private service: AppService,
    private headerService: HeaderService,
  ) {}
}