import {Component, HostListener, OnInit} from '@angular/core';
import {BlockSyncService, TransactionService} from '@app/_services';
import {AuthService} from '@app/_services';
import {AccountIndex} from '@app/_helpers';
import {environment} from '@src/environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'CICADA';
  readyStateTarget: number = 3;
  readyState: number = 0;
  mediaQuery = window.matchMedia('(max-width: 768px)');
  accountIndexQuery = new AccountIndex(environment.contractAddress);

  constructor(
    private authService: AuthService,
    private transactionService: TransactionService,
    private blockSyncService: BlockSyncService
  ) {
    this.authService.mutableKeyStore.loadKeyring().then(r => this.authService.getPublicKeys().then());
    this.blockSyncService.blockSync();
  }

  ngOnInit(): void {
    this.mediaQuery.addListener(this.onResize);
    this.onResize(this.mediaQuery);
    this.queryAccountsIndex(20).then();
  }

  async queryAccountsIndex(numberOfAccounts: number): Promise<void> {
    console.log(`Last ${numberOfAccounts} accounts are: `, await this.accountIndexQuery.last(numberOfAccounts));
    console.log('Total number of accounts: ', await this.accountIndexQuery.totalAccounts());
  }

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

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

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