import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { marker } from '@biesbjerg/ngx-translate-extract-marker';
import { AppStorage } from 'src/app/shared/app-storage';
import { DownloadRecoveryCodeDialogComponent } from 'src/app/shared/dialogs/download-recovery-code-dialog/download-recovery-code-dialog.component';
import { AuthService } from 'src/app/shared/server-services/auth.service';
import { TitleService } from 'src/app/shared/services/title.service';
import { styleChangedObserver } from 'src/app/shared/shared-observers';
import { EnvironmentService } from 'src/environments/environment.service';

@Component({
  selector: 'app-home',
  templateUrl: './home-base.component.html',
  styleUrls: ['./home-base.component.scss'],
})
export class HomeBaseComponent {
  public colorTheme;
  public siteBase: string;

  constructor(
    private titleService: TitleService,
    private environmentService: EnvironmentService,
    private authService: AuthService,
    private dialog: MatDialog
  ) {
    this.colorTheme = AppStorage.getItem('style_mode');
    styleChangedObserver.subscribe((style) => {
      this.colorTheme = style;
    });

    this.siteBase = this.environmentService.site_base;

    this.titleService.setTabTitle(marker('Welcome'));

    if (!this.authService.isAnonym()) {
      // show it earlier, than the guides directives registered, or it can cause rendering problems
      this.showRecoveryKeyReminder();
    }
  }

  private showRecoveryKeyReminder: () => void = () => {
    var nextReminderDateString = AppStorage.getItem('recoveryKeyDownloadReminderDate');
    if (!nextReminderDateString) {
      this.dialog.open(DownloadRecoveryCodeDialogComponent);
      return;
    }

    var nextReminderDate = new Date(Date.parse(nextReminderDateString));
    var currentDate = new Date();

    if (nextReminderDate < currentDate) {
      this.dialog.open(DownloadRecoveryCodeDialogComponent);
    }
  };
}
