import {Component, computed, OnDestroy, OnInit} from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import {MatOption} from '@angular/material/core';
import {MatFormField, MatLabel} from '@angular/material/form-field';
import {MatSelect} from '@angular/material/select';
import {
  gmmUtils,
  MultiSelectableParam,
  NshmpLibNgGmmMenuComponent,
  NshmpLibNgGmmMultiParamMenuComponent,
  NshmpLibNgGmmPlotOptionsControlPanelComponent,
} from '@ghsc/nshmp-lib-ng/gmm';
import {
  NshmpLibNgControlPanelButtonsComponent,
  NshmpService,
} from '@ghsc/nshmp-lib-ng/nshmp';
import {Subscription} from 'rxjs';

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 GMM vs magnitude service.
 */
@Component({
  imports: [
    NshmpLibNgGmmMenuComponent,
    NshmpLibNgGmmPlotOptionsControlPanelComponent,
    NshmpLibNgControlPanelButtonsComponent,
    NshmpLibNgGmmMultiParamMenuComponent,
    MatFormField,
    MatLabel,
    MatSelect,
    MatOption,
    EventParametersComponent,
    SourceParametersComponent,
    PathParametersComponent,
    SiteParametersComponent,
    ReactiveFormsModule,
  ],
  selector: 'app-control-panel',
  styleUrl: './control-panel.component.scss',
  templateUrl: './control-panel.component.html',
})
export class ControlPanelComponent implements OnInit, OnDestroy {
  /** 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;

  private subs: Subscription[] = [];

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

  ngOnInit(): void {
    this.subs.push(
      this.controls.gmmSource.valueChanges.subscribe(() => {
        this.onGmmSource();
      }),
    );

    this.subs.push(
      this.controls.multiSelectableParam.valueChanges.subscribe(() =>
        this.onMultiSelectableParam(),
      ),
    );

    this.subs.push(
      this.controls.showEpistemicUncertainty.valueChanges.subscribe(() =>
        this.onShowEpistemicUncertainty(),
      ),
    );

    this.subs.push(
      this.controls.imt.valueChanges.subscribe(() => this.service.resetState()),
    );
  }

  ngOnDestroy(): void {
    this.subs.forEach(sub => sub?.unsubscribe());
  }

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

  private onGmmSource() {
    const formValues = this.form.getRawValue();

    if (
      !this.service.state().usageResponse ||
      formValues.gmmSource.length === 0
    ) {
      this.controls.imt.patchValue(gmmUtils.imtPlaceHolder().value);
      this.service.updateState({
        supportedImts: [],
      });
      return;
    }

    const supportedImts = gmmUtils.getSupportedImts(
      formValues.gmmSource,
      this.service.state().usageResponse,
    );

    this.service.updateState({
      supportedImts,
    });

    const imt = [...supportedImts].shift();

    this.controls.imt.patchValue(imt?.value);
    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.VS30) {
      this.controls.vs30.setValue(parameters.vs30.value as number);
      this.controls.gmmSource.setValue([]);
      this.controls.gmmSource.markAsPristine();
    }

    this.controls.vs30Multi.setValue([]);
    this.controls.imt.setValue(this.service.defaultFormValues().imt);
    this.service.resetState();
  }

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