import {Component, computed, DestroyRef, OnInit} from '@angular/core';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
import {ReactiveFormsModule} from '@angular/forms';
import {
  MultiSelectableParam,
  NshmpGmmMenuComponent,
  NshmpGmmMultiParamMenuComponent,
  NshmpGmmPlotOptionsControlPanelComponent,
} from '@ghsc/nshmp-lib-ng/gmm';
import {NshmpControlPanelButtonsComponent, NshmpService} from '@ghsc/nshmp-lib-ng/nshmp';

import {AppService} from '../../services/app.service';
import {EventParametersComponent} from '../event-parameters/event-parameters.component';
import {PathParametersComponent} from '../path-parameters/path-parameters.component';
import {SiteParametersComponent} from '../site-parameters/site-parameters.component';
import {SourceParametersComponent} from '../source-parameters/source-parameters.component';

/**
 * Control panel form fields and buttons to call response spectra service.
 */
@Component({
  imports: [
    NshmpGmmMenuComponent,
    NshmpGmmPlotOptionsControlPanelComponent,
    NshmpGmmMultiParamMenuComponent,
    NshmpControlPanelButtonsComponent,
    EventParametersComponent,
    SourceParametersComponent,
    PathParametersComponent,
    SiteParametersComponent,
    ReactiveFormsModule,
  ],
  selector: 'app-control-panel',
  styleUrl: './control-panel.component.scss',
  templateUrl: './control-panel.component.html',
})
export class ControlPanelComponent implements OnInit {
  /** Form controls state */
  controls = this.service.formGroup.controls;

  /** Control panel form field state */
  form = this.service.formGroup;

  /** Whether a GMM has been selected */
  gmmSelected = this.controls.gmmSource.getRawValue()?.length > 0;

  /** Usage parameters */
  parameters = computed(() => this.service.usage()?.response.parameters);

  /** Service call info state */
  serviceCallInfo = this.service.serviceCallInfo;

  /** Supported IMTs based on GMMs selected */
  supportedImts = this.service.supportedImts;

  constructor(
    public service: AppService,
    public nshmpService: NshmpService,
    private destroyRef: DestroyRef,
  ) {}

  ngOnInit(): void {
    this.controls.gmmSource.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
      this.onGmmSource();
    });

    this.controls.multiSelectableParam.valueChanges
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(() => this.onMultiSelectableParam());

    this.controls.showEpistemicUncertainty.valueChanges
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(() => this.onShowEpistemicUncertainty());
  }

  /**
   * On form submit.
   */
  onSubmit(): void {
    this.service.callService();
    this.nshmpService.selectPlotControl();
  }

  private onGmmSource() {
    this.service.resetState();
  }

  private onMultiSelectableParam(): void {
    if (!this.service.state().usageResponse) {
      return;
    }

    const {multiSelectableParam} = this.form.getRawValue();
    const parameters = this.service.state().usageResponse.response.parameters;

    if (multiSelectableParam === MultiSelectableParam.MW) {
      this.controls.Mw.setValue(parameters.Mw.value as number);
    } else if (multiSelectableParam === MultiSelectableParam.VS30) {
      this.controls.vs30.setValue(parameters.vs30.value as number);
    }

    this.controls.MwMulti.setValue([]);
    this.controls.vs30Multi.setValue([]);
    this.controls.gmmSource.setValue([]);
    this.controls.gmmSource.markAsPristine();
    this.service.resetState();
  }

  private onShowEpistemicUncertainty(): void {
    this.service.createPlots();
  }
}