import {Component, computed, DestroyRef, OnInit, Signal} from '@angular/core';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
import {ReactiveFormsModule} from '@angular/forms';
import {
  NshmpHazardLocationFormComponent,
  NshmpHazardMaxDirectionFormComponent,
  NshmpHazardModelFormComponent,
  NshmpHazardReturnPeriodFormComponent,
  NshmpHazardSiteClassFormComponent,
  NshmpHazardTruncationFormComponent,
} from '@ghsc/nshmp-lib-ng/hazard';
import {NshmpMapSelectSiteComponent, SelectSiteDialogData} from '@ghsc/nshmp-lib-ng/map';
import {
  NshmpControlPanelButtonsComponent,
  NshmpSectionComponent,
  NshmpService,
  nshmpUtils,
  RETURN_PERIOD_BOUNDS,
  RETURN_PERIODS,
} from '@ghsc/nshmp-lib-ng/nshmp';
import {environment} from 'projects/nshmp-apps/src/environments/environment';
import {combineLatest} from 'rxjs';

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

/**
 * Control panel with form fields to call hazard service.
 */
@Component({
  imports: [
    NshmpHazardModelFormComponent,
    NshmpHazardLocationFormComponent,
    NshmpMapSelectSiteComponent,
    NshmpHazardSiteClassFormComponent,
    NshmpHazardReturnPeriodFormComponent,
    NshmpHazardTruncationFormComponent,
    NshmpHazardMaxDirectionFormComponent,
    NshmpControlPanelButtonsComponent,
    NshmpSectionComponent,
    ReactiveFormsModule,
  ],
  selector: 'app-control-panel',
  styleUrl: './control-panel.component.scss',
  templateUrl: './control-panel.component.html',
})
export class ControlPanelComponent implements OnInit {
  /** Max and min bounds for return periods */
  returnPeriodBounds = RETURN_PERIOD_BOUNDS;
  /** List of return periods */
  returnPeriods = RETURN_PERIODS;
  /** Site class select menu holder */
  siteClassPlaceHolder = nshmpUtils.selectPlaceHolder();

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

  /** Data for select site component */
  selectSiteData: Signal<SelectSiteDialogData> = computed(() => {
    const usage = this.service.usage();
    const nshmService = this.service.nshmService();

    if (usage === null || nshmService === undefined) {
      return;
    }

    const services = environment.webServices.nshmpHazWs.services.curveServices;

    return {
      mapUrl: `${nshmService.url}${services.map}?raw=true`,
      sitesUrl: `${nshmService.url}${services.sites}?raw=true`,
    };
  });

  /** List of site class `Parameter`s */
  siteClasses = computed(() => this.service.usage()?.response?.models.siteClasses);

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

  ngOnInit(): void {
    const controls = this.formGroup.controls;

    controls.model.valueChanges
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(() => this.onModelChange());

    combineLatest([controls.latitude.valueChanges, controls.longitude.valueChanges])
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(() => {
        this.service.resetState();
        const values = this.formGroup.getRawValue();

        if (values.latitude && values.longitude) {
          this.selectSiteData().site = {
            latitude: values.latitude,
            longitude: values.longitude,
          };
        }
      });

    combineLatest([
      controls.returnPeriod.valueChanges,
      controls.maxDirection.valueChanges,
      controls.truncate.valueChanges,
      controls.siteClass.valueChanges,
    ])
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(() => this.service.createPlots());
  }

  /**
   * On form submit.
   */
  onSubmit(): void {
    this.service.callService();
    this.nshmpService.selectPlotControl();
  }

  private onModelChange(): void {
    const {latitude, longitude} = this.formGroup.getRawValue();
    const latitudeBounds = this.service.usage().response.models.latitude;
    const longitudeBounds = this.service.usage().response.models.longitude;

    if (
      !(
        latitude >= latitudeBounds.min &&
        latitude <= latitudeBounds.max &&
        longitude >= longitudeBounds.min &&
        longitude <= longitudeBounds.max
      )
    ) {
      this.formGroup.patchValue({
        latitude: NaN,
        longitude: NaN,
      });
    }

    this.formGroup.controls.latitude.markAsPristine();
    this.formGroup.controls.longitude.markAsPristine();
    this.service.resetState();
  }
}