import {AsyncPipe} from '@angular/common';
import {AfterViewInit, Component, DestroyRef, OnInit} from '@angular/core';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
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';

/**
 * Main entrypoint for ground motion response spectra.
 *
 * Plots response spectra and standard deviations using GMM service.
 *
 * @see https://earthquake.usgs.gov/ws/nshmp/data/gmm/spectra
 */
@Component({
  imports: [
    NshmpTemplateComponent,
    NshmpTemplateControlPanelComponent,
    NshmpTemplateContentContainerComponent,
    NshmpTemplateMainContentComponent,
    NshmpTemplateSettingsComponent,
    NshmpTemplateAboutComponent,
    ControlPanelComponent,
    ContentComponent,
    PlotSettingsPanelComponent,
    AboutComponent,
    AsyncPipe,
  ],
  selector: 'app-main',
  styleUrl: './app.component.scss',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit, AfterViewInit {
  /** Application title */
  title = apps().gmm.spectra.display;

  private tutorialKey = 'gmm-spectra-show-tutorial';

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

  ngOnInit(): void {
    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 computes deterministic response spectra for all GMMs
            supported by USGS hazard software.
          </p>
        `,
      ),
      this.tutorialService.controlPanelStep(),
      this.tutorialService.plotSettingsStep(),
      this.tutorialService.applicationSettingsStep(),
      this.tutorialService.navigationStep(),
      this.tutorialService.gmmMultiSelectableStep(),
      this.tutorialService.gmmTectonicSettingStep(),
      this.tutorialService.gmmMenuStep(),
      this.tutorialService.magnitudeStep(),
      //Rake
      {
        attachTo: {
          element: `.rake-input ${this.tutorialService.matTextField}`,
          on: 'auto',
        },
        text: `
          <p>The rake (or sense of slip) of a rupture surface, in degrees ([-180, 108])</p>

          <em>Required: yes</p>
        `,
        title: 'Rake',
      },
      // Rake buttons
      {
        attachTo: {
          element: '.rake-buttons',
          on: 'auto',
        },
        text: `
          <p>Pre-defined rake values</p>

          <ul>
            <li>Strike-Slip: 0°</li>
            <li>Normal: -90°</li>
            <li>Reverse: 90°</li>
          </ul>
        `,
        title: 'Rake Buttons',
      },
      // Zhyp
      {
        attachTo: {
          element: `.zhyp-input ${this.tutorialService.matTextField}`,
          on: 'auto',
        },
        text: `
          <p>
            The depth to the top of a rupture surface, in kilometers and positive-down
          </p>

          <p>Uncheck "Centered down-dip" to customize</p>

          <em>Required: if "Centered down-dip" is uncheked</em>
        `,
        title: '<p>Z<sub>HYP</sub></p>',
      },
      // Centered down-dip
      {
        attachTo: {
          element: '.down-dip-checkbox',
          on: 'auto',
        },
        text: `
          <p>
            Whether the depth to the top of the rupture surface should be centered
            down-dip automatically
          </p>

          <p>Uncheck to customize Z<sub>HYP</sub></p>
        `,
        title: 'Centered Down-Dip',
      },
      this.tutorialService.zTorStep(),
      this.tutorialService.dipStep(),
      this.tutorialService.widthStep(),
      // Rx
      {
        attachTo: {
          element: `.rx-input ${this.tutorialService.matTextField}`,
          on: 'auto',
        },
        text: `
          <p>
            The shortest distance from a site to the extended trace a fault, in kilometers
          </p>
        `,
        title: '<p>R<sub>X</sub></p>',
      },
      // Rrup
      {
        attachTo: {
          element: `.rrup-input ${this.tutorialService.matTextField}`,
          on: 'auto',
        },
        text: `
          <p>
            The shortest distance from a site to a rupture, in kilometers
          </p>

          <p>
            Use "Derive R<sub>JB</sub> and R<sub>RUP</sub>" checkbox to customize
            or have automatically calculated.
          </p>

          <em>Required: yes<em>
        `,
        title: '<p>R<sub>RUP</sub></p>',
      },
      // Rjb
      {
        attachTo: {
          element: `.rjb-input ${this.tutorialService.matTextField}`,
          on: 'auto',
        },
        text: `
          <p>
            The shortest distance from a site to the surface projection of a rupture, in kilometers
          </p>

          <p>
            Use "Derive R<sub>JB</sub> and R<sub>RUP</sub>" checkbox to customize
            or have automatically calculated.
          </p>

          <em>Required: yes<em>
        `,
        title: '<p>R<sub>JB</sub></p>',
      },
      // Derive
      {
        attachTo: {
          element: '.rjb-rrup-checkbox',
          on: 'auto',
        },
        text: `
          <p>
            Whether to automatically calculate R<sub>JB</sub> and R<sub>RUP</sub>
            from R<sub>X</sub>
          </p>
        `,
        title: '<p>Derive R<sub>JB</sub> and R<sub>RUP</sub></p>',
      },
      // hw-fw toggle
      {
        attachTo: {
          element: '.hanging-wall-button',
          on: 'auto',
        },
        text: `
          <p>Change whether R<sub>X</sub> is hanging wall or footwall</p>
        `,
        title: 'Hanging Wall Selector',
      },
      this.tutorialService.vs30Step(),
      this.tutorialService.z1p0Step(),
      this.tutorialService.z2p5Step(),
      this.tutorialService.zSedStep(),
      this.tutorialService.epistemicUncertaintyStep(),
      this.tutorialService.plotStep(),
      this.tutorialService.serviceCallsStep(),
      this.tutorialService.resetControlPanelStep(),
      // Plot tab
      {
        attachTo: {
          element: '.plots-tab',
          on: 'auto',
        },
        text: 'Shows the plots',
        title: 'Plots Tab',
      },
      // Medians tab
      {
        attachTo: {
          element: '.medians-tab',
          on: 'auto',
        },
        text: 'Show the median curves data in tabular form',
        title: 'Medians Tab',
      },
      // Sigmas tab
      {
        attachTo: {
          element: '.sigmas-tab',
          on: 'auto',
        },
        text: 'Show the sigmas in tabular form',
        title: 'Sigmas Tab',
      },
      this.tutorialService.completeStep(this.title),
    ]);
  }
}