import {
  ChangeDetectionStrategy,
  Component,
  computed,
  DestroyRef,
  effect,
  inject,
  OnInit,
} from '@angular/core';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
import {ReactiveFormsModule} from '@angular/forms';
import {MatFormField, MatLabel} from '@angular/material/form-field';
import {MatOption, MatSelect} from '@angular/material/select';
import {
  MultiSelectableParam,
  NshmpGmmMenuComponent,
  NshmpGmmMultiParamMenuComponent,
  NshmpGmmPlotOptionsControlPanelComponent,
  VS30_COMMON_VALUES,
} from '@ghsc/nshmp-lib-ng/gmm';
import {
  NshmpControlPanelButtonsComponent,
  NshmpSectionComponent,
  NshmpService,
} from '@ghsc/nshmp-lib-ng/nshmp';
import {NshmpTemplateService} from '@ghsc/nshmp-template';

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({
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {id: 'gmm-spectra-control-panel'},
  imports: [
    NshmpGmmMenuComponent,
    NshmpGmmPlotOptionsControlPanelComponent,
    NshmpGmmMultiParamMenuComponent,
    NshmpControlPanelButtonsComponent,
    EventParametersComponent,
    SourceParametersComponent,
    PathParametersComponent,
    SiteParametersComponent,
    ReactiveFormsModule,
    NshmpSectionComponent,
    MatFormField,
    MatSelect,
    MatOption,
    MatLabel,
  ],
  selector: 'app-control-panel',
  styleUrl: './control-panel.component.scss',
  templateUrl: './control-panel.component.html',
})
export class ControlPanelComponent implements OnInit {
  service = inject(AppService);
  nshmpService = inject(NshmpService);
  templateService = inject(NshmpTemplateService);
  private destroyRef = inject(DestroyRef);

  Params = MultiSelectableParam;

  /** 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() {
    effect(() => {
      const developmentMode = this.templateService.developmentMode();
      const parameters = this.parameters();

      if (developmentMode) {
        this.form.patchValue({
          damping: this.form.value.damping ?? parameters?.damping?.value,
        });
      } else {
        this.form.patchValue({
          damping: null,
          dampingMulti: [],
          multiSelectableParam: MultiSelectableParam.GMM,
        });
      }
    });
  }

  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;

    this.form.patchValue({
      dampingMulti: [],
      gmmSource: [],
      MwMulti: [],
      vs30Multi: [],
    });

    switch (multiSelectableParam) {
      case MultiSelectableParam.DAMPING: {
        this.controls.dampingMulti.setValue(parameters.damping.values);
        break;
      }
      case MultiSelectableParam.GMM: {
        break;
      }
      case MultiSelectableParam.MW: {
        this.controls.Mw.setValue(parameters.Mw.value as number);
        this.controls.MwMulti.setValue([4, 5, 6, 7, 8]);
        break;
      }
      case MultiSelectableParam.VS30: {
        this.controls.vs30.setValue(parameters.vs30.value as number);
        this.controls.vs30Multi.setValue(
          VS30_COMMON_VALUES.filter(entry => entry.value >= 150 && entry.value <= 1500).map(
            entry => entry.value,
          ),
        );
        break;
      }
    }

    this.controls.gmmSource.markAsPristine();
    this.service.resetState();
  }

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