import {Component, computed, OnDestroy, OnInit} from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import {MatError, MatFormField, MatLabel} from '@angular/material/form-field';
import {MatInput} from '@angular/material/input';
import {Subscription} from 'rxjs';

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

/**
 * Control panel form fields for GMM path parameters.
 */
@Component({
  imports: [MatLabel, MatFormField, MatInput, MatError, ReactiveFormsModule],
  selector: 'app-path-parameters',
  styleUrl: './path-parameters.component.scss',
  templateUrl: './path-parameters.component.html',
})
export class PathParametersComponent implements OnInit, OnDestroy {
  /** 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);

  private distanceSubscription = new Subscription();

  constructor(private service: AppService) {}

  ngOnInit(): void {
    this.distanceSubscription = this.controls.distance.valueChanges.subscribe(
      () => this.service.resetState(),
    );
  }

  ngOnDestroy(): void {
    this.distanceSubscription.unsubscribe();
  }
}