import '@arcgis/map-components/dist/components/arcgis-legend';
import '@arcgis/map-components/dist/components/arcgis-placement';

import {NgTemplateOutlet} from '@angular/common';
import {
  Component,
  CUSTOM_ELEMENTS_SCHEMA,
  DestroyRef,
  effect,
  OnInit,
  ViewEncapsulation,
} from '@angular/core';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
import {MatButtonModule} from '@angular/material/button';
import {MatMenuModule} from '@angular/material/menu';
import GeoJSONLayer from '@arcgis/core/layers/GeoJSONLayer';
import MapView from '@arcgis/core/views/MapView';
import SceneView from '@arcgis/core/views/SceneView';
import {NshmpMapArcgis3dComponent, 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({
  encapsulation: ViewEncapsulation.None,
  imports: [
    LegendComponent,
    NshmpMapArcgisComponent,
    NshmpMapArcgis3dComponent,
    MatButtonModule,
    MatMenuModule,
    NgTemplateOutlet,
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  selector: 'app-map',
  styleUrl: './map.component.scss',
  templateUrl: './map.component.html',
})
export class MapComponent implements OnInit {
  mapStyle = this.service.formGroup.controls.mapStyle;

  private view: MapView | SceneView;
  private init = false;

  constructor(
    public service: AppService,
    private destroyRef: DestroyRef,
  ) {
    effect(() => {
      const layer = this.service.layers().nshmBoundaryLayer;
      this.goTo(layer);
    });
  }

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

    mapStyle.valueChanges
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(mapStyle => this.service.onMapStyleChange(mapStyle));
  }

  viewReady(view: __esri.MapView | __esri.SceneView): void {
    this.view = view;

    if (this.init) {
      this.service.onMapViewChange();
      const layer = this.service.layers().nshmBoundaryLayer;
      this.goTo(layer);
    }

    this.init = true;
  }

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