import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import {
  TranslocoDirective,
  provideTransloco,
  provideTranslocoScope,
} from '@jsverse/transloco';
import { of } from 'rxjs';

@Component({
  selector: 'foo',
  standalone: true,
  imports: [TranslocoDirective],
  template: `
    im foo!!
    <ng-container *transloco="let t; prefix: 'inline';">
     <h1>{{ t('title') }}</h1>
    </ng-container>
  `,
  providers: [
    provideTranslocoScope({
      scope: 'inline',
      loader: {
        en: () => Promise.resolve({ title: 'foo title in en' }),
        fr: () => Promise.resolve({ title: 'foo title in fr' }),
      },
    }),
  ],
})
export class Foo {}

@Component({
  selector: 'bar',
  standalone: true,
  imports: [TranslocoDirective],
  template: `
   im bar!!
   <ng-container *transloco="let t; prefix: 'inline';">
    <h1>{{ t('title') }}</h1>
   </ng-container>
  `,
  providers: [
    provideTranslocoScope({
      scope: 'inline',
      loader: {
        en: () => Promise.resolve({ title: 'bar title in en' }),
        fr: () => Promise.resolve({ title: 'bar title in fr' }),
      },
    }),
  ],
})
export class Bar {}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, Foo, Bar],
  template: `
    im app!
    <foo *ngIf="toggle"></foo>
    <bar *ngIf="!toggle"></bar>

    <button (click)="toggle=!toggle">switch</button>
  `,
})
export class App {
  name = 'Angular';
  toggle = false;
}

bootstrapApplication(App, {
  providers: [
    provideTransloco({
      config: {
        availableLangs: ['en', 'fr'],
      },
      // loader: class implements TranslocoLoader {
      //   getTranslation(lang: string) {
      //     return of(langs[lang]);
      //   }
      // },
    }),
  ],
});