import {Component, input, output} from '@angular/core';
import {FormGroup} from '@angular/forms';
import {MatButton} from '@angular/material/button';

import {NshmpPlotSettingFormGroup, NshmpPlotSettings} from '../../models';

/**
 * Button to reset the plot settings back to default.
 */
@Component({
  imports: [MatButton],
  selector: 'nshmp-plot-reset-plot-setting',
  styleUrl: './reset-plot-setting.component.scss',
  templateUrl: './reset-plot-setting.component.html',
})
export class NshmpPlotResetPlotSettingComponent {
  /** SCSS class of reset button size */
  readonly resetButtonSize = input('grid-col-3');

  /** Whether the reset button is disabled */
  readonly resetDisabled = input(true);

  /** The reset button label */
  readonly resetLabel = input('Reset');

  /** Plot settings form state */
  readonly plotSettings = input<FormGroup<NshmpPlotSettingFormGroup>>();

  readonly defaultPlotSetting = input<NshmpPlotSettings>();

  /** Event emitter on button click */
  readonly resetClick = output();

  constructor() {}

  reset(): void {
    this.resetClick.emit();

    const plotSettings = this.plotSettings();
    const defaultPlotSetting = this.defaultPlotSetting();
    if (plotSettings && defaultPlotSetting) {
      plotSettings.setValue({
        config: {
          toImageButtonOptions: {
            ...defaultPlotSetting.config.toImageButtonOptions,
          },
        },
        layout: defaultPlotSetting.layout,
      });
    }
  }
}