import {
  ChangeDetectionStrategy,
  Component,
  DestroyRef,
  inject,
  OnInit,
  signal,
} from '@angular/core';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
import {MatButton, MatFabButton} from '@angular/material/button';
import {MatIcon} from '@angular/material/icon';
import {MatMenu, MatMenuTrigger} from '@angular/material/menu';
import MapView from '@arcgis/core/views/MapView';
import SceneView from '@arcgis/core/views/SceneView';
import {ArcgisMapOptions, ArcLayerId, NshmpMapArcgisComponent} from '@ghsc/nshmp-lib-ng/map';
import {from} from 'rxjs';

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

/**
 * ArcGIS map with layers showing NSHM boundary, fault sections, and test sites.
 */
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {id: 'source-model-maps-map'},
  imports: [
    LegendComponent,
    NshmpMapArcgisComponent,
    MatIcon,
    MatMenu,
    MatMenuTrigger,
    MatFabButton,
    MatButton,
  ],
  selector: 'app-map',
  styleUrl: './map.component.scss',
  templateUrl: './map.component.html',
})
export class MapComponent implements OnInit {
  service = inject(AppService);
  private destroyRef = inject(DestroyRef);

  mapOptions = signal<ArcgisMapOptions>({});

  private view: MapView | SceneView;

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

    model.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(model => {
      if (model !== null && this.service.treesUsageResponse()) {
        const title = this.service.treesUsageResponse().response.model.name;

        this.mapOptions.set({
          print: {
            layoutOptions: {
              titleText: title,
            },
          },
        });
      }
    });
  }

  viewReady(view: __esri.MapView): void {
    this.view = view;
    this.service.updateState({view});

    view.on('layerview-create', (viewEvent: __esri.ViewLayerviewCreateEvent) => {
      if (viewEvent.layer.id === ArcLayerId.NSHM.toString()) {
        this.goTo(viewEvent.layer);
      }
    });
  }

  private goTo(layer: __esri.Layer): void {
    if (this.view && layer) {
      from(layer.when())
        .pipe(takeUntilDestroyed(this.destroyRef))
        .subscribe(() => {
          from(this.view.goTo(layer.fullExtent))
            .pipe(takeUntilDestroyed(this.destroyRef))
            .subscribe();
        });
    }
  }
}