import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { Subject } from 'rxjs';
import { switchMap, takeUntil } from 'rxjs/operators';

import { DashboardComponent as NgxDashboardComponent, WidgetComponent } from 'ngx-dashboard';

import { GaResponse } from 'src/app/gaji-id-resources/gaji-id-api-response.model';
import { UserWidget } from 'src/app/gaji-id-resources/resources/system/user-widget/user-widget.model';
import { Widget } from 'src/app/gaji-id-resources/resources/system/widget/widget.model';

import { AuthenticationState } from 'src/app/base/authentication/authentication.state';
import { ContentAlertService } from 'src/app/components/messages/alerts/content-alert/content-alert.service';
import { UiBlockService } from 'src/app/components/ui-block/ui-block.service';
import { UserWidgetService } from 'src/app/gaji-id-resources/resources/system/user-widget/user-widget.service';

import { WidgetCatatanComponent } from './widgets/catatan/widget-catatan.component';

import * as _ from 'lodash';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit, OnDestroy {

  @ViewChild(NgxDashboardComponent) public dashboard: NgxDashboardComponent;
  public widgetsSize: number[] = [300, 100];
  public dashboardMargin: number = 15;

  public widgets: Widget[] = [];

  private ngUnsubscribe: Subject<boolean> = new Subject();

  constructor(
    private authenticationState: AuthenticationState,
    private contentAlertService: ContentAlertService,
    private uiBlockService: UiBlockService,
    private userWidgetService: UserWidgetService
  ) {
    this.widgets.push({ id: null, version: 0, rootId: null, rootVersion: null, widgetId: '1', widgetName: '1', cols: 1, rows: 2, active: true, size: [1, 2], initialSize: [1, 2] });
    this.widgets.push({ id: null, version: 0, rootId: null, rootVersion: null, widgetId: '2', widgetName: '2', cols: 1, rows: 3, active: true, size: [1, 3], initialSize: [1, 3] });
    this.widgets.push({ id: null, version: 0, rootId: null, rootVersion: null, widgetId: '3', widgetName: '3', cols: 1, rows: 2, active: true, size: [1, 2], initialSize: [1, 2] });
    this.widgets.push({ id: null, version: 0, rootId: null, rootVersion: null, widgetId: '4', widgetName: '4', cols: 2, rows: 4, active: true, size: [2, 4], initialSize: [2, 4] });
  }

  ngOnInit() {
    this.dashboard.disableDrag();

    /*
      Note :
      For some reason, must declare new instance instead use loop instance.
      Don't know why @_@
    */
    for (let widget of this.widgets) {
      const newWidget = new Widget(widget);
      const ref = this.dashboard.addItem(WidgetCatatanComponent);
      ref.widget = newWidget;
      ref.widgetId = newWidget.widgetId;
      ref.size = [newWidget.cols, newWidget.rows];
      ref.dashboard = this.dashboard;
      ref.widgetsSize = this.widgetsSize;
      ref.onRemove.subscribe(
        (result) => {
          console.log('result : ', result);
          console.log('newWidget : ', widget);
        }
      );
    }
    this.dashboard.refreshWidgets();
    /*
    this.uiBlockService.showUiBlock();
    this.authenticationState.getUserLogin()
      .pipe(
        switchMap((userLogin) => this.userWidgetService.search({ userId: userLogin.id })),
        takeUntil(this.ngUnsubscribe)
      ).subscribe(
        (result: GaResponse<UserWidget[]>) => {
          this.widgets = result.data.map(userWidget => {
            userWidget.widget.size = [userWidget.widget.cols, userWidget.widget.rows];
            userWidget.widget.initialSize = [userWidget.widget.cols, userWidget.widget.rows];
            return userWidget.widget;
          });
          console.log(this.widgets);
        },
        (error) => { this.contentAlertService.error(error.errors); },
        () => {
          // Note :
          // For some reason, must declare new instance instead use loop instance.
          // Don't know why @_@
          for (let widget of this.widgets) {
            const newWidget = new Widget(widget);
            const ref = this.dashboard.addItem(WidgetCatatanComponent);
            ref.widget = newWidget;
            ref.widgetId = newWidget.widgetId;
            ref.size = [newWidget.cols, newWidget.rows];
            ref.dashboard = this.dashboard;
            ref.widgetsSize = this.widgetsSize;
            ref.onRemove.subscribe(
              (result) => {
                console.log('result : ', result);
                console.log('newWidget : ', widget);
              }
            );
          }
          this.dashboard.refreshWidgets();
        }
      );
      */
  }

  ngOnDestroy() {
    this.ngUnsubscribe.next(true);
    this.ngUnsubscribe.complete();
  }

  ngAfterViewInit(): void {
    setTimeout(() => { this._onResize(null); })
  }

  private _onResize(event: any) {
    if (window.innerWidth < 750) {
      this.widgetsSize = [this.dashboard.width / 2 - this.dashboardMargin, this.widgetsSize[1]];
    } else {
      const nbColumn = Math.floor(this.dashboard.width / (300 + this.dashboardMargin));
      this.widgetsSize = [this.dashboard.width / nbColumn - this.dashboardMargin, this.widgetsSize[1]];
    }
  }

  public log(widget: WidgetComponent, type: string) {
    // console.log(widget, type);
    // console.log('widgets : ', this.widgets);
  }

  public logOrder(order: Array<string>) {
    // save order number here!
    console.log(order, 'orderchange');
  }

  close(e: any, id: string) {
    this.dashboard.removeItemById(id);
    e.preventDefault();
    e.stopPropagation();
  }

  editWidget() {
    if (this.dashboard.dragEnable) {
      this.dashboard.disableDrag();
    } else {
      this.dashboard.enableDrag();
    }
  }

  public addWidget() {
    const random = Math.random() + '';
    const newWidget = new Widget({ id: null, version: 0, rootId: null, rootVersion: null, widgetId: random, widgetName: random, cols: 2, rows: 1, active: true, size: [2, 3], initialSize: [2, 3] });
    const ref = this.dashboard.addItem(WidgetCatatanComponent);
    ref.widget = newWidget;
    ref.widgetId = newWidget.widgetId;
    ref.size = [newWidget.cols, newWidget.rows];
    ref.dashboard = this.dashboard;
    ref.widgetsSize = this.widgetsSize;
    ref.onRemove.subscribe(
      (result) => {
        console.log('result : ', result);
        console.log('newWidget : ', newWidget);
      }
    );

    this.dashboard.refreshWidgets();
  }
}