import { Injector, NgModule } from '@angular/core';
import { environment } from 'src/environments/environment';
import { BrowserModule } from '@angular/platform-browser';
import { createCustomElement } from '@angular/elements';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {
  NgxSkeletonLoaderComponent,
  NgxSkeletonLoaderModule,
} from 'ngx-skeleton-loader';

/**
 * Skeleton component http://www.npmjs.com/package/ngx-skeleton-loader
 *
 * tag: no-skeleton
 */
@NgModule({
  imports: [BrowserModule, NgxSkeletonLoaderModule],
  entryComponents: [NgxSkeletonLoaderComponent],
  exports: environment.production ? [] : [NgxSkeletonLoaderComponent],
})
export class SkeletonModule implements NgxSkeletonLoaderModule {
  constructor(private injector: Injector) {}

  ngDoBootstrap() {
    const el = createCustomElement(NgxSkeletonLoaderComponent, {
      injector: this.injector,
    });

    customElements.define('no-skeleton', el);
  }
}
/**
 * Skeleton component http://www.npmjs.com/package/ngx-skeleton-loader
 *
 * tag: no-skeleton
 */
function bootstrap() {
  platformBrowserDynamic()
    .bootstrapModule(SkeletonModule)
    .catch((err) => console.error(err));
}

if (environment.production) {
  bootstrap();
}