import {Component, effect, OnInit, ViewEncapsulation} from '@angular/core';
import {NshmpLibNgAboutPageComponent} from '@ghsc/nshmp-lib-ng/about';
import {NshmpLibNgHazardProvisionalModelComponent} from '@ghsc/nshmp-lib-ng/hazard';
import {NshmpLibNgTemplateComponent} from '@ghsc/nshmp-lib-ng/nshmp';
import {
  HeaderService,
  NshmpTemplateContentContainerComponent,
  NshmpTemplateControlPanelComponent,
  NshmpTemplateMainContentComponent,
  NshmpTemplateSettingsComponent,
} from '@ghsc/nshmp-template';
import {apps} from 'projects/nshmp-apps/src/shared/utils/applications.utils';
import {navigation} from 'projects/nshmp-apps/src/shared/utils/navigation.utils';
import {Subscription} from 'rxjs';

import {AboutComponent} from './components/about/about.component';
import {ControlPanelComponent} from './components/control-panel/control-panel.component';
import {InfoPopupComponent} from './components/info-popup/info-popup.component';
import {MapComponent} from './components/map/map.component';
import {PlotSettingsPanelComponent} from './components/plot-settings-panel/plot-settings-panel.component';
import {AppService} from './services/app.service';

/**
 * Main entrypoint for the data mapping application.
 *
 * Show vairous layers associated with a NSHM using Leaflet.
 *
 * @see https://leafletjs.com/
 */
@Component({
  encapsulation: ViewEncapsulation.None,
  imports: [
    NshmpLibNgTemplateComponent,
    NshmpTemplateContentContainerComponent,
    NshmpTemplateControlPanelComponent,
    NshmpTemplateMainContentComponent,
    NshmpTemplateSettingsComponent,
    NshmpLibNgHazardProvisionalModelComponent,
    NshmpLibNgAboutPageComponent,
    ControlPanelComponent,
    MapComponent,
    PlotSettingsPanelComponent,
    InfoPopupComponent,
    AboutComponent,
  ],
  selector: 'app-app',
  styleUrl: './app.component.scss',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  /** Subscirption on controls change */
  controlsSubscription: Subscription;
  /** Navigation list for meny */
  navigationList = navigation();
  /** Application title */
  title = apps().source.data.display;

  constructor(
    public service: AppService,
    private headerService: HeaderService,
  ) {
    effect(() => {
      this.headerService.controlPanelSelected();
      this.headerService.settingsSelected();
      this.service.mapRedraw();
    });
  }

  ngOnInit() {
    this.service.init();
  }
}