import {AsyncPipe} from '@angular/common';
import {AfterViewInit, Component, DestroyRef, OnInit, ViewEncapsulation} from '@angular/core';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
import {NshmpHazardProvisionalModelComponent} from '@ghsc/nshmp-lib-ng/hazard';
import {NshmpService} from '@ghsc/nshmp-lib-ng/nshmp';
import {
  NshmpTemplateAboutComponent,
  NshmpTemplateComponent,
  NshmpTemplateContentContainerComponent,
  NshmpTemplateControlPanelComponent,
  NshmpTemplateMainContentComponent,
  NshmpTemplateService,
} from '@ghsc/nshmp-template';
import {ShepherdService} from 'angular-shepherd';
import {NavigationService} from 'projects/nshmp-apps/src/shared/services/navigation.service';
import {TutorialService} from 'projects/nshmp-apps/src/shared/services/tutorial.service';
import {apps} from 'projects/nshmp-apps/src/shared/utils/applications.utils';

import {AboutComponent} from './components/about/about.component';
import {ControlPanelComponent} from './components/control-panel/control-panel.component';
import {MapComponent} from './components/map/map.component';
import {AppService} from './services/app.service';

/**
 * Main entrypoint for the data mapping application.
 *
 * Show vairous layers associated with a NSHM using ArcGIS
 *
 * @see https://developers.arcgis.com/javascript/latest/
 */
@Component({
  encapsulation: ViewEncapsulation.None,
  imports: [
    NshmpTemplateComponent,
    NshmpTemplateContentContainerComponent,
    NshmpTemplateControlPanelComponent,
    NshmpTemplateMainContentComponent,
    NshmpHazardProvisionalModelComponent,
    NshmpTemplateAboutComponent,
    ControlPanelComponent,
    MapComponent,
    AboutComponent,
    AsyncPipe,
  ],
  selector: 'app-app',
  styleUrl: './app.component.scss',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit, AfterViewInit {
  /** Application title */
  title = apps().source.modelMaps.display;

  private tutorialKey = 'source-model-maps-show-tutorial';

  constructor(
    public service: AppService,
    public navService: NavigationService,
    public nshmpTemplateService: NshmpTemplateService,
    public nshmpService: NshmpService,
    private shepherdService: ShepherdService,
    private tutorialService: TutorialService,
    private destroyRef: DestroyRef,
  ) {}

  ngOnInit() {
    this.nshmpService.applicationTitle = this.title;
    this.service.init();
    this.nshmpTemplateService.showTutorialInMenu = true;

    this.nshmpTemplateService
      .startTutorial()
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(() => {
        this.shepherdService.start();
      });
  }

  ngAfterViewInit(): void {
    this.addSteps();
    this.tutorialService.start(this.tutorialKey);
  }

  addSteps(): void {
    this.shepherdService.addSteps([
      this.tutorialService.introStep(
        this.title,
        `
          <p>
            This application provides graphic representations of USGS national
            seismic hazard model (NSHM) components.
          </p>
        `,
      ),
      this.tutorialService.controlPanelStep(),
      this.tutorialService.applicationSettingsStep(),
      this.tutorialService.navigationStep(),
      // Map style
      {
        attachTo: {
          element: '.map-style-select',
          on: 'auto',
        },
        text: 'Change between 2D and 3D map style',
        title: 'Map Style',
      },
      this.tutorialService.nshmStep(),
      // Layer toggles
      {
        attachTo: {
          element: '.nshm-boundary-toggle',
          on: 'auto',
        },
        text: 'Toggle layers to view on map',
        title: 'Layers',
      },
      // Base layers
      {
        attachTo: {
          element: '.base-layers',
          on: 'auto',
        },
        text: 'Change the base map',
        title: 'Base Map',
      },
      // Legend
      {
        attachTo: {
          element: '.legend',
          on: 'auto',
        },
        text: 'View layer legend',
        title: 'Legend',
      },
      this.tutorialService.completeStep(this.title),
    ]);
  }
}