import {Component, OnDestroy, OnInit} from '@angular/core';
import {HistoryService} from '../state/history.service';
import {HistoryQuery} from '../state/history.query';
import {animate, state, style, transition, trigger} from '@angular/animations';
import {SocketService} from '../../socket.service';
import {eventOfType, EVENTS} from '../../const';
import {startWith, switchMap} from 'rxjs/operators';
import {Order} from '@datorama/akita';
import {Subscription} from "rxjs";

@Component({
  selector: 'dia-man-tools-page',
  templateUrl: './page.component.html',
  styleUrls: ['./page.component.css'],
  animations: [
    trigger('detailExpand', [
      state('collapsed', style({height: '0px', minHeight: '0'})),
      state('expanded', style({height: '*'})),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
    ])
  ]
})
export class PageComponent implements OnInit, OnDestroy {
  private readonly subs = new Subscription();
  devices$ = this.historyQuery.selectAll({
    sortBy: 'time',
    sortByOrder: Order.DESC
  });
  displayedColumns = ['sn', 'ip', 'time', 'deviceId'];
  expandedElement = null;

  constructor(
    private readonly historyQuery: HistoryQuery,
    private readonly historyService: HistoryService,
    private readonly socket: SocketService
  ) {
  }

  ngOnInit(): void {
    this.subs.add(
      this.socket.socket.pipe(
        eventOfType(EVENTS.COMPLETED),
        startWith(true),
        switchMap(() => this.historyService.fetchAll())
      )
        .subscribe(console.log)
    );
  }

  ngOnDestroy(): void {
    this.subs.unsubscribe();
  }


}