import {Component, computed, OnDestroy, OnInit, Signal} from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import {MatOption} from '@angular/material/core';
import {MatFormField, MatLabel} from '@angular/material/form-field';
import {MatSelect} from '@angular/material/select';
import {
  NshmpLibNgHazardLocationFormComponent,
  NshmpLibNgHazardMaxDirectionFormComponent,
  NshmpLibNgHazardModelFormComponent,
  NshmpLibNgHazardReturnPeriodFormComponent,
  NshmpLibNgHazardSiteClassFormComponent,
  NshmpLibNgHazardTruncationFormComponent,
} from '@ghsc/nshmp-lib-ng/hazard';
import {
  NshmpLibNgMapSelectSiteComponent,
  SelectSiteDialogData,
} from '@ghsc/nshmp-lib-ng/map';
import {
  NshmpLibNgControlPanelButtonsComponent,
  NshmpService,
  nshmpUtils,
  RETURN_PERIOD_BOUNDS,
  RETURN_PERIODS,
} from '@ghsc/nshmp-lib-ng/nshmp';
import {NshmId} from '@ghsc/nshmp-utils-ts/libs/nshmp-lib/nshm';
import {environment} from 'projects/nshmp-apps/src/environments/environment';
import {Subscription} from 'rxjs';

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

/**
 * Control panel with form fields to call dynamic hazard services.
 */
@Component({
  imports: [
    MatFormField,
    MatLabel,
    MatSelect,
    MatOption,
    NshmpLibNgHazardModelFormComponent,
    NshmpLibNgHazardLocationFormComponent,
    NshmpLibNgMapSelectSiteComponent,
    NshmpLibNgHazardSiteClassFormComponent,
    NshmpLibNgHazardReturnPeriodFormComponent,
    NshmpLibNgHazardTruncationFormComponent,
    NshmpLibNgHazardMaxDirectionFormComponent,
    NshmpLibNgControlPanelButtonsComponent,
    ReactiveFormsModule,
  ],
  selector: 'app-control-panel',
  styleUrl: './control-panel.component.scss',
  templateUrl: './control-panel.component.html',
})
export class ControlPanelComponent implements OnInit, OnDestroy {
  /** 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;

  /** List of available IMTs */
  imts = computed(() => this.service.usage()?.response?.model?.imts);

  /** 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?.model.siteClasses,
  );

  private imtSubscription = new Subscription();
  private maxDirectionSubscription = new Subscription();
  private modelCompareSubscription = new Subscription();
  private modelSubscription = new Subscription();
  private returnPeriodSubscription = new Subscription();
  private truncateSubscription = new Subscription();
  private vs30Subscription = new Subscription();

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

  ngOnInit(): void {
    this.modelSubscription =
      this.formGroup.controls.model.valueChanges.subscribe(() => {
        this.service.onModelChange();
      });

    this.modelCompareSubscription =
      this.formGroup.controls.modelCompare.valueChanges.subscribe(
        modelCompare => this.onModelCompare(modelCompare),
      );

    this.imtSubscription = this.formGroup.controls.imt.valueChanges.subscribe(
      () => this.service.createPlots(),
    );

    this.maxDirectionSubscription =
      this.formGroup.controls.maxDirection.valueChanges.subscribe(() =>
        this.service.createPlots(),
      );

    this.returnPeriodSubscription =
      this.formGroup.controls.returnPeriod.valueChanges.subscribe(() =>
        this.service.createPlots(),
      );

    this.truncateSubscription =
      this.formGroup.controls.truncate.valueChanges.subscribe(() =>
        this.service.createPlots(),
      );

    this.vs30Subscription = this.formGroup.controls.vs30.valueChanges.subscribe(
      () => this.service.resetState(),
    );
  }

  ngOnDestroy(): void {
    this.imtSubscription.unsubscribe();
    this.maxDirectionSubscription.unsubscribe();
    this.modelCompareSubscription.unsubscribe();
    this.modelSubscription.unsubscribe();
    this.returnPeriodSubscription.unsubscribe();
    this.truncateSubscription.unsubscribe();
    this.vs30Subscription.unsubscribe();
  }

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

  private onModelCompare(modelCompare: NshmId): void {
    if (modelCompare === null) {
      this.service.onModelChange();
    } else {
      const usages = [this.service.usageModelA(), this.service.usageModelB()];

      this.service.updateState({
        combinedUsage: this.service.combineUsages(usages),
      });
    }
  }
}