import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { EffectsModule } from '@ngrx/effects';

import { MenuModule } from '../shared/menu/menu.module';
import { ExpandableNavbarSectionComponent } from './expandable-navbar-section/expandable-navbar-section.component';
import { ThemedExpandableNavbarSectionComponent } from './expandable-navbar-section/themed-expandable-navbar-section.component';
import { NavbarComponent } from './navbar.component';
import { NavbarEffects } from './navbar.effects';
import { NavbarSectionComponent } from './navbar-section/navbar-section.component';
import { ThemedNavbarComponent } from './themed-navbar.component';

const effects = [
  NavbarEffects,
];

const ENTRY_COMPONENTS = [
  // put only entry components that use custom decorator
  NavbarSectionComponent,
  ExpandableNavbarSectionComponent,
  ThemedExpandableNavbarSectionComponent,
];

@NgModule({
  imports: [
    CommonModule,
    MenuModule,
    FormsModule,
    EffectsModule.forFeature(effects),
    ...ENTRY_COMPONENTS,
    NavbarComponent,
    ThemedNavbarComponent,
  ],
  providers: [],
  exports: [
    ThemedNavbarComponent,
    NavbarSectionComponent,
    ThemedExpandableNavbarSectionComponent,
  ],
})

/**
 * This module handles all components and pipes that are necessary for the horizontal navigation bar
 */
export class NavbarModule {
  /**
   * NOTE: this method allows to resolve issue with components that using a custom decorator
   * which are not loaded during SSR otherwise
   */
  static withEntryComponents() {
    return {
      ngModule: NavbarModule,
      providers: ENTRY_COMPONENTS.map((component) => ({ provide: component })),
    };
  }

}