import { DatePipe } from '@angular/common';
import { HTTP_INTERCEPTORS, HttpHandler, HttpInterceptor, HttpRequest, provideHttpClient } from '@angular/common/http';
import { APP_INITIALIZER, Injectable, NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MAT_DATE_LOCALE } from '@angular/material/core';
import { MatPaginatorIntl } from '@angular/material/paginator';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import * as moment from 'moment';
import { AppRoutingModule } from './app-routing.module';
import { MaterialModule } from './material/material.module';

import { AutofocusDirective } from './material/autofocus';

import { AppComponent } from './app.component';
import { PageLogin } from './pages/login/login.page';
import { PageNotFound } from './pages/notfound/notfound.page';
import { PageProfile } from './pages/profile/profile.page';
import { PageUnavailable } from './pages/unavailable/unavailable.page';
import { UiMain } from './ui/main/main.ui';
import { ErrorCodePipe, I18nEmptyPipe, I18nPipe } from './utils/i18n.pipe';
import { MomentPipe } from './utils/moment.pipe';

import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { PageManagement } from './pages/management/management.page';
import { PagePassword } from './pages/password/password.page';
import { PageTurnover } from './pages/turnover/turnover.page';
import { PageTurnoversManage } from './pages/turnovers/manage/manage.page';
import { PageTurnovers } from './pages/turnovers/turnovers.page';
import { PageUserCreate } from './pages/users/create/users.create.page';
import { PageUsers } from './pages/users/users.page';
import { I18nPaginatorIntl, I18nService } from './services/i18n.service';
import { ConfirmDialog } from './ui/confirm/confirm.component';
import { UiTurnovers } from './ui/turnovers/turnovers.ui';


export function fetchI18n(i18n: I18nService) {
  return () => i18n.fetch();
}


export function setMaterialDate(i18n: I18nService) {
  let locale = i18n.getLocale();

  if (locale == 'de-informal') {
    locale = 'de';
  }

  moment.locale(locale);
  return locale;
}

@Injectable()
export class XhrInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    const xhr = req.clone({
      headers: req.headers.set('X-Requested-With', 'XMLHttpRequest').set('Content-Type', 'application/json;charset=UTF-8'), withCredentials: true
    });
    return next.handle(xhr);
  }
}

@NgModule({
  declarations: [
    AppComponent,
    AutofocusDirective,
    ConfirmDialog,
    ErrorCodePipe,
    I18nPipe,
    I18nEmptyPipe,
    MomentPipe,
    PageLogin,
    PageManagement,
    PageNotFound,
    PagePassword,
    PageProfile,
    PageTurnover,
    PageTurnovers,
    PageTurnoversManage,
    PageUnavailable,
    PageUsers,
    PageUserCreate,
    UiMain,
    UiTurnovers
  ],
  imports: [
    AppRoutingModule,
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    MaterialModule,
    ReactiveFormsModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production, registrationStrategy: 'registerWhenStable:30000' }),
  ],
  exports: [MaterialModule],
  providers: [
    provideHttpClient(),
    { provide: APP_INITIALIZER, useFactory: fetchI18n, deps: [I18nService], multi: true },
    { provide: MAT_DATE_LOCALE, useFactory: setMaterialDate, deps: [I18nService], multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: XhrInterceptor, multi: true },
    DatePipe,
    {
      provide: MatPaginatorIntl, useFactory: (i18n: I18nService) => {
        const service = new I18nPaginatorIntl();
        service.injectI18n(i18n)
        return service;
      }, deps: [I18nService]
    },
    {
      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
      useValue: {
        subscriptSizing: 'dynamic'
      }
    }],
  bootstrap: [AppComponent],
})
export class AppModule {
}