import { NgModule, Injector, DoBootstrap, ApplicationRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { provideAnimations } from '@angular/platform-browser/animations';
import { HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { createCustomElement } from '@angular/elements';

// import { StoreModule, USER_PROVIDED_META_REDUCERS } from '@ngrx/store';
// import { EffectsModule } from '@ngrx/effects';
// import { StoreRouterConnectingModule } from '@ngrx/router-store';

import { TranslateModule } from '@ngx-translate/core';

import {
    CoreModule,
    CONFIG_TOKEN,
    EUI_CONFIG_TOKEN,
    translateConfig,
    provideEuiInitializer,
} from '@eui/core';
import {
    provideCsdrCore,
    ElementStorageService,
} from '@csdr/core';

// import { TOKEN, reducerProvider, metaReducers } from './reducers/index';
// import { CustomSerializer } from './reducers/custom-route-serializer';

import { environment } from '../environments/environment';
import { appConfig } from '../config';

import { @root.common.module@ as RootCommonModule } from '@root.npm.pkg@';
import { provideCsdrIntegrationElement } from '@csdr/integration/element';
import { provideCsdrIntegrationParticipant } from '@csdr/integration/participant';
import { RoutingModule } from './routing.module';

import { ModuleComponent } from './module.component';

// IMPORTS

// DECLARATIONS

@NgModule({
    imports: [
        BrowserModule,
        // StoreRouterConnectingModule.forRoot({ stateKey: 'router', serializer: CustomSerializer }),
        // EffectsModule.forRoot([]),
        TranslateModule.forRoot(translateConfig),

        CoreModule.forRoot(),
        RootCommonModule,
        RoutingModule,

       // DEFINITIONS
    ],
    providers: [
        // reducerProvider,

        provideAnimations(),
        provideHttpClient(withInterceptorsFromDi()),
        provideEuiInitializer(),
        provideCsdrCore(),
        provideCsdrIntegrationElement({ appConfig, environment }),

        // PROVIDERS
    ],
})
export class AppModule implements DoBootstrap {

    constructor(private injector: Injector, private http: HttpClient) {
        // CONSTRUCTOR DECLARATIONS
    }

    ngDoBootstrap(appRef: ApplicationRef): void {
        const elementSampleEui = createCustomElement(ModuleComponent, { injector: this.injector });
        try {
            customElements.define(appConfig.global.elementName, elementSampleEui);
        } catch (e) {
            console.log(e);
        }
    }
}
