import { APP_INITIALIZER, NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";

import { AppComponent } from "./app.component";
import { FormsModule } from "@angular/forms";
import { RecordKeyChord } from "./directives/record-key-chord.directive";
import { PlanDisplayModule } from "./plan-display/plan-display.module";
import { ConfigService } from "./services/config.service";
import { ColorPickerComponent } from './color-picker/color-picker.component';
import { MatButtonModule } from "@angular/material/button";
import { EditorComponent } from "./editor/editor.component";

export function initializeApp(configService: ConfigService) {
  return (): Promise<any> => {
    return configService.init();
  };
}

@NgModule({
  declarations: [
    AppComponent,
    RecordKeyChord, ColorPickerComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    PlanDisplayModule,
    MatButtonModule,
    BrowserAnimationsModule,
    EditorComponent,
  ],
  providers: [
    {
      // Makes sure we can get the config initialized ASAP as we might need it in lots of places really early.
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      deps: [ConfigService],
      multi: true
    }
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }