import {Component, computed, DestroyRef, 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({
  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 {
  /** 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);

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

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