import {
  Component,
  OnInit,
  ViewEncapsulation,
  AfterContentInit,
  AfterViewInit,
  DoCheck,
  ViewChild,
  ElementRef
} from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

import { fuseAnimations } from 'src/@fuse/animations';
import { FuseConfigService } from 'src/@fuse/services/config.service';

import { GridsterConfig, GridsterItem } from 'angular-gridster2';
import { DashboardService, IComponent } from '../service/dashboard.service';
import { Router, ActivatedRoute } from '@angular/router';
import { map, take } from 'rxjs/operators';

@Component({
  selector: 'dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss'],
  encapsulation: ViewEncapsulation.None,
  animations: fuseAnimations
})
export class DashboardComponent implements OnInit {
  widgets: any;
  dashboardUrl: string;

  @ViewChild('dashboardIFrame', { static: true }) dashboardIFrame: ElementRef;

  /**
   * Constructor
   */
  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    public domSanitizer: DomSanitizer,
    public dashboardService: DashboardService,
    private fuseConfigService: FuseConfigService
  ) {
    this.router.routeReuseStrategy.shouldReuseRoute = function() {
      return false;
    };

    this.fuseConfigService.config = {
      layout: {
        toolbar: {
          hidden: true
        },
        footer: {
          hidden: true
        },
        sidepanel: {
          hidden: true
        }
      }
    };
  }

  // -----------------------------------------------------------------------------------------------------
  // @ Lifecycle hooks
  // -----------------------------------------------------------------------------------------------------

  /**
   * On init
   */
  ngOnInit(): void {
    // Get the widgets from the service

    this.activatedRoute.paramMap
      .pipe(
        take(1),
        map(params => {
          const dashboardId: string = params.get('id');
          let dashboardUrl: string = '';
          switch (dashboardId) {
            case 'main':
              dashboardUrl =
                'http://localhost:3000/d/dNOFxlDZz/system?theme=light&refresh=5s&kiosk';
              break;
            case 'mariadb':
              dashboardUrl =
                'http://localhost:8888/sources/0/dashboards/4?tempVars%5Bhost%5D=telegraf&lower=now%28%29%20-%2015m&present=true';
              break;

            default:
              break;
          }

          this.dashboardIFrame.nativeElement.src = dashboardUrl;
        })
      )
      .subscribe();
  }

  // -----------------------------------------------------------------------------------------------------
  // @ Private methods
  // -----------------------------------------------------------------------------------------------------

  get options(): GridsterConfig {
    return this.dashboardService.options;
  }

  get layout(): GridsterItem[] {
    return this.dashboardService.layout;
  }

  get components(): IComponent[] {
    return this.dashboardService.components;
  }
}
