import {ChangeDetectionStrategy, Component, HostListener} from '@angular/core';
import {AuthService, ErrorDialogService, LoggingService, TransactionService} from '@app/_services';
import {catchError} from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
  title = 'CICADA';
  readyStateTarget: number = 3;
  readyState: number = 0;
  mediaQuery: MediaQueryList = window.matchMedia('(max-width: 768px)');

  constructor(
    private authService: AuthService,
    private transactionService: TransactionService,
    private loggingService: LoggingService,
    private errorDialogService: ErrorDialogService
  ) {
    (async () => {
      try {
        await this.authService.init();
        // this.authService.getPublicKeys()
        //   .pipe(catchError(async (error) => {
        //     this.loggingService.sendErrorLevelMessage('Unable to load trusted public keys.', this, {error});
        //     this.errorDialogService.openDialog({message: 'Trusted keys endpoint can\'t be reached. Please try again later.'});
        // })).subscribe(this.authService.mutableKeyStore.importPublicKey);
        const publicKeys = await this.authService.getPublicKeys();
        await this.authService.mutableKeyStore.importPublicKey(publicKeys);
      } catch (error) {
        this.errorDialogService.openDialog({message: 'Trusted keys endpoint can\'t be reached. Please try again later.'});
        // TODO do something to halt user progress...show a sad cicada page 🦗?
      }
    })();
    this.mediaQuery.addListener(this.onResize);
    this.onResize(this.mediaQuery);
  }

  // Load resize
  onResize(e): void {
    const sidebar: HTMLElement = document.getElementById('sidebar');
    const content: HTMLElement = document.getElementById('content');
    const sidebarCollapse: HTMLElement = document.getElementById('sidebarCollapse');
    if (sidebarCollapse?.classList.contains('active')) {
      sidebarCollapse?.classList.remove('active');
    }
    if (e.matches) {
      if (!sidebar?.classList.contains('active')) {
        sidebar?.classList.add('active');
      }
      if (!content?.classList.contains('active')) {
        content?.classList.add('active');
      }
    } else {
      if (sidebar?.classList.contains('active')) {
        sidebar?.classList.remove('active');
      }
      if (content?.classList.contains('active')) {
        content?.classList.remove('active');
      }
    }
  }

  @HostListener('window:cic_transfer', ['$event'])
  async cicTransfer(event: CustomEvent): Promise<void> {
    const transaction: any = event.detail.tx;
    await this.transactionService.setTransaction(transaction, 100);
  }

  @HostListener('window:cic_convert', ['$event'])
  async cicConvert(event: CustomEvent): Promise<void> {
    const conversion: any = event.detail.tx;
    await this.transactionService.setConversion(conversion, 100);
  }
}