import {AsyncPipe} from '@angular/common';
import {AfterViewInit, Component, DestroyRef, inject, OnInit} 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,
  NshmpTemplateSettingsComponent,
} 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 {ContentComponent} from './components/content/content.component';
import {ControlPanelComponent} from './components/control-panel/control-panel.component';
import {PlotSettingsPanelComponent} from './components/plot-settings-panel/plot-settings-panel.component';
import {AppService} from './services/app.service';

/**
 * Application to call dynamic hazard services and plot results.
 */
@Component({
  imports: [
    NshmpTemplateComponent,
    NshmpTemplateControlPanelComponent,
    NshmpTemplateContentContainerComponent,
    NshmpTemplateMainContentComponent,
    NshmpTemplateAboutComponent,
    NshmpHazardProvisionalModelComponent,
    NshmpTemplateSettingsComponent,
    ControlPanelComponent,
    ContentComponent,
    PlotSettingsPanelComponent,
    AboutComponent,
    AsyncPipe,
  ],
  selector: 'app-app',
  styleUrl: './app.component.scss',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit, AfterViewInit {
  service = inject(AppService);
  navService = inject(NavigationService);
  nshmpService = inject(NshmpService);
  private shepherdService = inject(ShepherdService);
  private nshmpTemplateService = inject(NshmpTemplateService);
  private tutorialService = inject(TutorialService);
  private destroyRef = inject(DestroyRef);

  /** Application title */
  title = apps().hazard.dynamic.display;

  private tutorialKey = 'hazard-dynamic-show-tutorial';

  ngOnInit(): void {
    this.nshmpService.applicationTitle = this.title;
    this.service.init();

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

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

  private addSteps(): void {
    this.shepherdService.addSteps([
      // Intro
      this.tutorialService.introStep(
        this.title,
        `
          <p>
            The dynamic hazard curve application computes on-demand probabilisitic
            seismic hazard curves from a USGS national seismic hazard model (NSHM).
          </p>
        `,
      ),
      // Control panel
      this.tutorialService.controlPanelStep(),
      // Plot settings
      this.tutorialService.plotSettingsStep(),
      // Settings
      this.tutorialService.applicationSettingsStep(),
      // Nav menu
      this.tutorialService.navigationStep(),
      // Model
      this.tutorialService.nshmStep(),
      // Latitude
      this.tutorialService.latitudeStep(),
      // Longitude
      this.tutorialService.longitudeStep(),
      // Select site
      this.tutorialService.selectSiteStep(),
      // Site class
      this.tutorialService.siteClassStep(),
      // Return period
      this.tutorialService.returnPeriodStep(),
      // Source type
      {
        attachTo: {
          element: `.source-type-select ${this.tutorialService.matTextField}`,
          on: 'auto',
        },
        text: `
          <p>
            Select which earthquake source type to plot
          </p>

          <p>
            List updates when service is called
          </p>
        `,
        title: 'Source Type',
      },
      // IMT
      {
        ...this.tutorialService.imtStep(),
        text: 'Choose the Intensity Measure Type (IMT) to plot all sources for',
      },
      // Truncate curves
      this.tutorialService.truncateCurves(),
      // Max direction
      this.tutorialService.maxDirectionStep(),
      // Plot
      this.tutorialService.plotStep(),
      // Service calls
      this.tutorialService.serviceCallsStep(),
      // Reset
      this.tutorialService.resetControlPanelStep(),
      // Plot tab
      {
        attachTo: {
          element: '.plots-tab',
          on: 'auto',
        },
        text: 'Shows the plots',
        title: 'Plots Tab',
      },
      // Curve data tab
      {
        attachTo: {
          element: '.hazard-tab',
          on: 'auto',
        },
        text: 'Show the hazard curve data in tabular form',
        title: 'Hazard Curve Data Tab',
      },
      // Magnitudes data tab
      {
        attachTo: {
          element: '.magnitudes-tab',
          on: 'auto',
        },
        text: 'Show the magnitude curve data in tabular form',
        title: 'Magnitude Data Tab',
      },
      // Sources data tab
      {
        attachTo: {
          element: '.sources-tab',
          on: 'auto',
        },
        text: 'Show the source data in tabular form',
        title: 'Source Data Tab',
      },
      // Spectra tab
      {
        attachTo: {
          element: '.spectra-tab',
          on: 'auto',
        },
        text: 'Show the response spectrum data in tabular form',
        title: 'Response Spectrum Data',
      },
      // Complete
      this.tutorialService.completeStep(this.title),
    ]);
  }
}