import { Component, OnDestroy, OnInit, ChangeDetectorRef } from '@angular/core';
import { DeploymentNotificationService } from '../services/deployment-notification.service';
import { Subscription } from 'rxjs/Subscription';
import { WebSocketService } from '../services/websocket.service';
import { LayoutCommand } from './layout-command';
import { config } from '../config';
import { SidebarComponent } from '../sidebar/sidebar.component';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit, OnDestroy {
  deploying = false;
  deploymentNotificationSubscription: Subscription;
  layout: string = config.dashboard.currentLayout;
  hide_messages: boolean = config.dashboard.hide_messages;
  iframeUrl: string = config.dashboard.iframeUrl;
  command_handlers = {'layout':          this.layoutHandler.bind(this),
                      'reload_frontend': this.reloadFrontendHandlder.bind(this)};

  constructor(private deploymentNotificationService: DeploymentNotificationService,
              private webSocketService: WebSocketService,
              private changeDetectorRef: ChangeDetectorRef) {}

  ngOnInit() {
    this.webSocketService.connect();
    this.webSocketService.observeKey<LayoutCommand>('dashboard').subscribe((event) => {
      this.command_handlers[event.data.command](event.data);
      this.changeDetectorRef.detectChanges();
    });
    this.deploymentNotificationSubscription = this.deploymentNotificationService.deploying.subscribe(
      (deploying) => this.deploying = deploying
    );
  }

  layoutHandler(data: LayoutCommand) {
    if (config.dashboard.enabledLayouts.includes(data.layout)) {
      this.setLayout(data.layout);
    } else {
      console.log('Invalid ide layout "' + data.layout + '" received!');
    }
    if (data.hide_messages != undefined) {
      this.hide_messages = data.hide_messages;
    }
  }

  reloadFrontendHandlder(data: LayoutCommand) {
    setTimeout(() => window.location.reload(), 2000);
  }

  setLayout(layout: string) {
    this.layout = layout;
    // We need to trigger a 'resize' event manually, otherwise ace editor stays collapsed
    // Ace editors 'resize' event listener requires a parameter of force=true
    setTimeout(() => window.dispatchEvent(new Event('resize', {force: true} as any)), 0);
  }

  ngOnDestroy() {
    if (this.deploymentNotificationSubscription) {
      this.deploymentNotificationSubscription.unsubscribe();
    }
  }
}