import { Component, inject, ChangeDetectionStrategy } from "@angular/core";
import { map, mergeMap } from "rxjs/operators";
import { LoginStateSubject } from "./core/session/session-type";
import { LoginState } from "./core/session/session-states/login-state.enum";
import { DemoDataInitializerService } from "./core/demo-data/demo-data-initializer.service";
import { environment } from "environments/environment";
import { SetupService } from "./core/setup/setup.service";
import { from, merge, Observable, of } from "rxjs";
import { MultiTabDetectionService } from "./core/database/multi-tab-detection.service";

/**
 * Component as the main entry point for the app.
 * Actual logic and UI structure is defined in other modules.
 */
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: "app-root",
  template: `
    @if (configReady$ | async) {
      <app-ui></app-ui>
    } @else {
      <app-application-loading></app-application-loading>
    }
  `,
  // eslint-disable-next-line @angular-eslint/prefer-standalone
  standalone: false,
})
export class AppComponent {
  private loginState = inject(LoginStateSubject);
  private demoDataInitializer = inject(DemoDataInitializerService);
  private setupService = inject(SetupService);

  configReady$: Observable<boolean>;

  constructor() {
    // Initialize multi-tab monitoring globally so warnings are shown proactively.
    inject(MultiTabDetectionService);

    this.configReady$ = this.loginState.pipe(
      // if logged out, we don't wait for config and treat this separately
      map((loginState) => loginState !== LoginState.LOGGED_IN),
      // immediately switch the state based on loginState but then take time for config readiness
      mergeMap((loggedOut) => {
        if (!loggedOut) {
          return merge(of(false), from(this.setupService.waitForConfigReady()));
        } else {
          return of(true);
        }
      }),
    );

    if (environment.demo_mode) {
      this.demoDataInitializer.logInDemoUser();
    }
  }
}