import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';
import { EditorComponent } from './components/editor/editor.component';
import { OutputComponent } from './components/output/output.component';
import { LandingPageComponent } from './components/landing-page/landing-page.component';
import { DocumentationComponent } from './components/documentation/documentation.component';
import { FormComponent } from './components/form/form.component';
import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
import { OurStoryComponent } from './components/our-story/our-story.component';
import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component';

import { ReactiveFormsModule } from '@angular/forms';

import { FormsModule } from '@angular/forms';
import { CodeMirrorComponent } from '@sandkasten/codemirror6-editor';

import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { TranslationService } from './services/translation.service';
import { SafeHTMLPipe } from './safe-html.pipe';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    EditorComponent,
    OutputComponent,
    LandingPageComponent,
    DocumentationComponent,
    FormComponent,
    PrivacyPolicyComponent,
    TermsOfServiceComponent,
    OurStoryComponent,
    SafeHTMLPipe
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    FormsModule,
    // Injection des HttpClient pour notre module de traduction
    HttpClientModule,
    // Initialisation du module de traduction
    TranslateModule.forRoot({
      // Manière dont on charge les fichiers de traduction
      loader: {
        provide: TranslateLoader,
        // On utiilise une fonction pour charger les fichiers de traduction
        useFactory: (createTranslateLoader),
        // deps permets de savoir ce dont on a besoin pour charger les fichiers de traduction
        deps: [HttpClient]
      },
      defaultLanguage: 'fr'
    }),
    CodeMirrorComponent
  ],
  providers: [TranslationService],
  bootstrap: [AppComponent]
})
export class AppModule { }

// On crée une fonction pour charger les fichiers de traduction 
export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json'); // On charge les fichiers de traduction depuis le dossier assets/i18n
}