import {Component} from "@angular/core";
import {Router, RouterStateSnapshot} from "@angular/router";
import {ChangeAppLanguage, Logout} from "@app/app.action";
import {AppStateModel} from "@app/app.state";
import {BaseDirective} from "@app/shared/directives/base.directive";
import {LanguagesEnum} from "@app/shared/enums/languages.enum";
import {RoutesEnum, urlSeparator} from "@app/shared/enums/routes.enum";
import {StateEnum} from "@app/shared/enums/state.enum";
import {ThemeEnum} from "@app/shared/enums/theme.enum";
import {TranslateService} from "@ngx-translate/core";
import {Navigate, RouterStateModel} from "@ngxs/router-plugin";
import {Select, Store} from "@ngxs/store";
import {Observable} from "rxjs";
import {environment} from "../environments/environment";
import {OAuthService} from "@app/oauth/oauth-service";

@Component({
  selector: "dlcm-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent extends BaseDirective {
  title = environment.appTitle;
  theme = environment.theme;
  currentModule: string;
  logo: string;

  @Select((state) => (state[StateEnum.router] as RouterStateModel).state) urlState$: Observable<RouterStateSnapshot>;
  @Select((state) => (state[StateEnum.application] as AppStateModel).appLanguage) appLanguage$: Observable<LanguagesEnum>;
  @Select((state) => (state[StateEnum.application] as AppStateModel).isLoggedIn) isLogged$: Observable<boolean>;

  constructor(private store: Store,
              private oauthService: OAuthService,
              private router: Router,
              private translate: TranslateService) {
    super();
    this.setLogo();
    this.setCurrentModule();
    this.languageSwitcher();
  }

  useLanguage(language: LanguagesEnum): void {
    // this.translate.use(language);
    this.store.dispatch(new ChangeAppLanguage(language));
  }

  navigate(route: string) {
    this.store.dispatch(new Navigate([route]));
  }

  private setLogo(): string {
    const basePath = "assets/images/";
    if (environment.theme === ThemeEnum.yareta) {
      this.logo = basePath + "Yareta-v.svg";
      return;
    }
    if (environment.theme === ThemeEnum.dlcm) {
      this.logo = basePath + "DLCM2.svg";
      return;
    }
  }

  private setCurrentModule() {
    this.addToSubscription(
      this.urlState$.subscribe(urlState => {
        if (urlState) {

          const url = urlState.url;
          if (url.startsWith(urlSeparator + RoutesEnum.organizationalUnit)) {
            this.currentModule = RoutesEnum.organizationalUnit;
            return;
          }

          if (url.startsWith(urlSeparator + RoutesEnum.access)) {
            this.currentModule = RoutesEnum.access;
            return;
          }

          if (url.startsWith(urlSeparator + RoutesEnum.deposit)) {
            this.currentModule = RoutesEnum.deposit;
            return;
          }

          this.currentModule = null;
        }
      }),
    );
  }

  private languageSwitcher() {
    // TOFIX Should be in app.state.ts but does't work as expected inside this class
    // (need 2 action ChangeLanguage to be take in consideration...)
    this.addToSubscription(this.appLanguage$.subscribe((language: LanguagesEnum) => {
      this.translate.use(language);
    }));
  }

  logout() {
    this.store.dispatch(new Logout());
  }
}