import {
  Component,
  OnDestroy,
  OnInit,
  ViewEncapsulation,
  Output,
  EventEmitter
} from '@angular/core';
import { Location } from '@angular/common';
import { ActivatedRoute } from '@angular/router';
import { Subject } from 'rxjs';
import { takeUntil, map, take } from 'rxjs/operators';

import { fuseAnimations } from 'src/@fuse/animations';
import { GrafanaApiService } from 'src/modules/grafana/service/grafana-api.service';

import { DashboardService } from 'src/modules/dashboard/service/dashboard.service';
import { Dashboard } from 'src/modules/dashboard/model/Dashboard';

@Component({
  selector: 'app-pages-settings-dashboard-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss'],
  encapsulation: ViewEncapsulation.None,
  animations: fuseAnimations
})
export class ListComponent implements OnInit, OnDestroy {
  @Output()
  selectedDashboard = new EventEmitter<Dashboard>();

  dashboards: Dashboard[] = [];
  currentDashboard: Dashboard;

  // Private
  private _unsubscribeAll: Subject<any>;

  /**
   * Constructor
   *
   * @param {ActivatedRoute} _activatedRoute
   * @param {TodoService} _todoService
   * @param {Location} _location
   */
  constructor(
    private _activatedRoute: ActivatedRoute,
    private _location: Location,
    private dashboardService: DashboardService,
    private grafanaApiService: GrafanaApiService
  ) {
    // Set the private defaults
    this._unsubscribeAll = new Subject();
  }

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

  /**
   * On init
   */
  ngOnInit(): void {
    this.dashboardService
      .getDashboards()
      .pipe(
        take(1),
        map(value => {
          this.dashboards = value;
        })
      )
      .subscribe();
  }

  /**
   * On destroy
   */
  ngOnDestroy(): void {
    // Unsubscribe from all subscriptions
    this._unsubscribeAll.next();
    this._unsubscribeAll.complete();
  }

  // -----------------------------------------------------------------------------------------------------
  // @ Private methods
  // -----------------------------------------------------------------------------------------------------
  private findDashboardIndex(id: number): number {
    let findIndex = -1;
    for (let i = 0; i < this.dashboards.length; i++) {
      if (this.dashboards[i].id === id) {
        findIndex = i;
        break;
      }
    }
    return findIndex;
  }

  // -----------------------------------------------------------------------------------------------------
  // @ Public methods
  // -----------------------------------------------------------------------------------------------------

  /**
   * Read todo
   */
  readDashboard(dashboard: Dashboard): void {
    // Set current todo
    this.selectedDashboard.emit(dashboard);
  }

  /**
   * On drop
   *
   * @param ev
   */
  onDrop(ev): void {
    console.log(this.dashboards);

    let findIndex = this.findDashboardIndex(ev.value.id);
    if (-1 === findIndex) {
      return;
    }

    this.dashboardService
      .updateDashboardSortOrder(ev.value.id, findIndex + 1)
      .pipe(take(1))
      .subscribe(
        res => {
          console.log(res);
        },
        err => {}
      );
  }

  /**
   * Read todo
   */
  onDeletedDashboard(dashboardId: number): void {
    let findIndex = this.findDashboardIndex(dashboardId);
    if (-1 === findIndex) {
      return;
    }

    this.dashboards.splice(findIndex, 1);
  }
}
