import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  DoCheck,
  NgZone,
  OnInit,
} from '@angular/core';
import { Parent } from '../types';
import { WorkerService } from '../worker.service';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TableComponent implements OnInit {
  public itemsToShow: Array<Parent> = [];

  constructor(
    private readonly workerService: WorkerService,
    private readonly ngZone: NgZone,
    private readonly changeDetectorRef: ChangeDetectorRef,
  ) {
    this.changeDetectorRef.detach();
  }

  ngOnInit(): void {
    const fn = (event: MessageEvent) => {
      this.ngZone.runOutsideAngular(
        () => {
          const itemsToShow: Array<Parent> = event.data.slice(-10);

          this.ngZone.run(
            () => {
              this.itemsToShow = itemsToShow;
              this.changeDetectorRef.detectChanges();
            },
          );
        },
      );
    }

    this.workerService.connect(fn.bind(this));
  }

  // Sort of useless because of too random data :)
  public trackByFn(index: number, item: Parent) {
    return `${item.id}${item.int}${item.float}${item.color}${item.child.id}${item.child.color}`;
  }
}