import {AsyncPipe} from '@angular/common';
import {Component, computed, DestroyRef, OnInit, ViewEncapsulation} from '@angular/core';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
import {ReactiveFormsModule} from '@angular/forms';
import {MatButtonToggle, MatButtonToggleGroup} from '@angular/material/button-toggle';
import {MatCheckbox} from '@angular/material/checkbox';
import {MatError, MatFormField, MatLabel} from '@angular/material/form-field';
import {MatInput} from '@angular/material/input';
import {
  GmmFormControlIds,
  MW_COMMON_VALUES,
  NshmpGmmMultiSelectComponent,
} from '@ghsc/nshmp-lib-ng/gmm';
import {NshmpSectionComponent} from '@ghsc/nshmp-lib-ng/nshmp';
import {combineLatest} from 'rxjs';
import {map} from 'rxjs/operators';

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

/**
 * Control panel form fields for GMM event parameters.
 */
@Component({
  encapsulation: ViewEncapsulation.None,
  imports: [
    NshmpGmmMultiSelectComponent,
    NshmpSectionComponent,
    MatLabel,
    MatFormField,
    MatInput,
    MatError,
    MatButtonToggleGroup,
    MatButtonToggle,
    MatCheckbox,
    AsyncPipe,
    ReactiveFormsModule,
  ],
  selector: 'app-event-parameters',
  styleUrl: './event-parameters.component.scss',
  templateUrl: './event-parameters.component.html',
})
export class EventParametersComponent implements OnInit {
  /** Common Vs30 values */
  MwCommonValues = MW_COMMON_VALUES;

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

  /** Whether magnitudes are multi-selectable */
  MwMultiple$ = this.service.formGroup.controls.multiSelectableParam.valueChanges.pipe(
    map(
      multiSelectableParam => multiSelectableParam.toString() === GmmFormControlIds.MW.toString(),
    ),
  );

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

  private controls = this.form.controls;

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

  ngOnInit(): void {
    combineLatest([
      this.controls.Mw.valueChanges,
      this.controls.rake.valueChanges,
      this.controls.rakeButton.valueChanges,
      this.controls.zHyp.valueChanges,
    ])
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(() => this.service.resetState());

    this.controls.zHypCentered.valueChanges
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(() => this.onZHypCentered());
  }

  private onZHypCentered(): void {
    if (this.form.getRawValue().zHypCentered) {
      this.controls.zHyp.disable();
    } else {
      this.controls.zHyp.enable();
    }

    this.service.calcHypocenterDepth(this.form);
  }
}