import {
  ChangeDetectionStrategy,
  Component,
  computed,
  DestroyRef,
  inject,
  OnInit,
} from '@angular/core';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
import {ReactiveFormsModule} from '@angular/forms';
import {MatError, MatFormField, MatLabel} from '@angular/material/form-field';
import {MatInput} from '@angular/material/input';
import {NshmpSectionComponent} from '@ghsc/nshmp-lib-ng/nshmp';

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

/**
 * Control panel form fields for GMM path parameters.
 */
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {id: 'gmm-magnitude-path-parameters'},
  imports: [MatLabel, MatFormField, MatInput, MatError, ReactiveFormsModule, NshmpSectionComponent],
  selector: 'app-path-parameters',
  styleUrl: './path-parameters.component.scss',
  templateUrl: './path-parameters.component.html',
})
export class PathParametersComponent implements OnInit {
  private service = inject(AppService);
  private destroyRef = inject(DestroyRef);

  /** Form controls state */
  controls = this.service.formGroup.controls;

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

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

  ngOnInit(): void {
    this.controls.distance.valueChanges
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(() => this.service.resetState());
  }
}