import {Component, DestroyRef, inject, OnInit} from '@angular/core';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
import {ReactiveFormsModule} from '@angular/forms';
import {MatOption} from '@angular/material/core';
import {MatFormField, MatLabel} from '@angular/material/form-field';
import {MatIconModule} from '@angular/material/icon';
import {MatSelect, MatSelectModule} from '@angular/material/select';
import {MatSlideToggle} from '@angular/material/slide-toggle';
import {MatSliderModule} from '@angular/material/slider';
import {NshmpHazardModelFormComponent} from '@ghsc/nshmp-lib-ng/hazard';
import {NshmpMapNshmFeaturesComponent} from '@ghsc/nshmp-lib-ng/map';
import {NshmpSectionComponent, ReturnPeriod} from '@ghsc/nshmp-lib-ng/nshmp';
import {Imt} from '@ghsc/nshmp-utils-ts/libs/nshmp-lib/gmm';
import {nshmYear} from '@ghsc/nshmp-utils-ts/libs/nshmp-lib/nshm';

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

/**
 * Form fields for turning on and off different map layers.
 */
@Component({
  imports: [
    NshmpHazardModelFormComponent,
    MatLabel,
    MatSlideToggle,
    MatFormField,
    MatSelect,
    MatOption,
    ReactiveFormsModule,
    MatIconModule,
    MatSelectModule,
    MatSliderModule,
    NshmpSectionComponent,
    NshmpMapNshmFeaturesComponent,
  ],
  selector: 'app-control-panel',
  styleUrl: './control-panel.component.scss',
  templateUrl: './control-panel.component.html',
})
export class ControlPanelComponent implements OnInit {
  service = inject(AppService);
  private destroyRef = inject(DestroyRef);

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

  /** Available IMTs for hazard map tiles */
  imts: Set<Imt> = new Set();

  /** Available return periods for hazard map tiles */
  returnPeriods: Set<ReturnPeriod> = new Set();

  /** Available years for hazard map tiles */
  years: Set<number> = new Set();

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

    controls.model.valueChanges
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(() => this.onModelChange());
    controls.hazardTileImt.valueChanges
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(() => this.service.createHazardLayer());
    controls.hazardTileReturnPeriod.valueChanges
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(() => this.service.createHazardLayer());
    controls.hazardTileYear.valueChanges
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(() => this.onHazardTileYear());
    controls.hasHazardTiles.valueChanges
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(() => this.onHazardToggle());
    controls.overlayOpacity.valueChanges
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(() => this.service.createHazardLayer());
  }

  private onHazardTileYear(): void {
    this.imts = new Set(
      this.service
        .filterTilesByYear(this.service.hazardTiles(), this.formGroup.getRawValue())
        .map(tile => tile.imt),
    );
    this.returnPeriods = new Set(
      this.service
        .filterTilesByImt(this.service.hazardTiles(), this.formGroup.getRawValue())
        .map(tile => tile.returnPeriod),
    );

    this.service.createHazardLayer();
  }

  private onHazardToggle(): void {
    const layer = this.service.layers().hazardLayer;
    this.service.createHazardLayer(layer);
  }

  private onModelChange(): void {
    this.years = new Set(
      this.service
        .filterTilesByRegion(this.service.hazardTiles(), this.formGroup.getRawValue())
        .map(tile => nshmYear(tile.nshm)),
    );
    this.service.resetState();
  }
}