import {Component, computed} from '@angular/core';
import {gmmUtils} from '@ghsc/nshmp-lib-ng/gmm';
import {
  NshmpLibNgPlotSettingsExpansionPanelComponent,
  NshmpPlot,
  PlotSettingsPlots,
} from '@ghsc/nshmp-lib-ng/plot';

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

/**
 * Plot settings form fields.
 */
@Component({
  imports: [NshmpLibNgPlotSettingsExpansionPanelComponent],
  selector: 'app-plot-settings-panel',
  styleUrl: './plot-settings-panel.component.scss',
  templateUrl: './plot-settings-panel.component.html',
})
export class PlotSettingsPanelComponent {
  plots = computed<PlotSettingsPlots[]>(() => {
    const meanPlot = this.service.meanPlotState();
    const sigmaPlot = this.service.sigmaPlotState();
    const defaultPlots = this.service.defaultPlots();

    return [
      {
        defaultPlotSetting: defaultPlots
          .get(gmmUtils.PlotType.MEANS)
          .settingsForm.getRawValue(),
        plot: meanPlot,
        updatePlot: plot => this.updatePlot(gmmUtils.PlotType.MEANS, plot),
      },
      {
        defaultPlotSetting: defaultPlots
          .get(gmmUtils.PlotType.SIGMA)
          .settingsForm.getRawValue(),
        plot: sigmaPlot,
        updatePlot: plot => this.updatePlot(gmmUtils.PlotType.SIGMA, plot),
      },
    ];
  });

  constructor(public service: AppService) {}

  updatePlot(id: string, plot: NshmpPlot): void {
    const plots = new Map(this.service.state().plots);
    plots.set(id, plot);
    this.service.updateState({
      plots,
    });
  }
}