import {
  Component,
  Input,
  Injector,
  OnInit,
  EventEmitter,
  ViewChild,
  AfterViewInit,
  QueryList,
  ContentChildren,
  ChangeDetectorRef,
} from '@angular/core';
import { CellClickEvent, GridComponent } from '@progress/kendo-angular-grid';
import { ComponentId } from '@mobilize/wms-framework';
import { AngularComponentId } from '@mobilize/wms-framework';
import { DataGridModel } from '@mobilize/wms-framework';
import { DataGridColumnComponent } from '../datagridcolumn/datagridcolumn.component';

@Component({
  selector: 'wm-data-grid',
  templateUrl: './datagrid.component.html',
  styleUrls: ['./datagrid.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
@ComponentId([AngularComponentId.dataGrid])
export class DataGridComponent implements OnInit, AfterViewInit {
  internalData: Array<any>;

  @Input()
  public model: DataGridModel;
  /**
   * Allows to configure the number of items that will be displayed per page.
   */
  @Input()
  pageSizes = [10, 20, 50, 100, 200];

  @Input()
  pageSize;

  @Input()
  cellClick: EventEmitter<CellClickEvent> = new EventEmitter();
  @Input()
  selectionChange: EventEmitter<any> = new EventEmitter();
  @Input()
  KeyDownHandler: EventEmitter<any> = new EventEmitter();

  @ContentChildren(DataGridColumnComponent)
  viewChildren: QueryList<DataGridColumnComponent>;

  @ViewChild(GridComponent, { static: false })
  kendoGridComponent: GridComponent;

  isInitialized = false;

  public refresh(): void {}

  constructor(
    private injector: Injector,
    private changeDetector: ChangeDetectorRef
  ) {}
  ngAfterViewInit(): void {
    if (!this.isInitialized) {
      this.viewChildren.forEach((item) => {
        this.model.addColumn(item.model);
      });
      this.isInitialized = true;
    }
    this.changeDetector.detectChanges();
  }

  ngOnInit(): void {
    this.model = this.model || new DataGridModel();
    this.pageSize = this.pageSize ? this.pageSize : 10;
  }

  public getCalculatedStyle(): void {}

  cellClickHandler($event): void {
    if ($event) {
      this.model.SelectedItem = $event.dataItem;
      this.model.SelectedIndex = $event.rowIndex;
      this.model.SelectedColumnIndex = $event.columnInde;
      this.cellClick.emit($event);
    }
  }

  selectionChangeHandler($event): void {
    if ($event) {
      this.model.SelectedItems = $event.selectedRows;
      this.selectionChange.emit($event);
    }
  }

  keyDownHandler($event): void {
    if ($event) {
      this.model?.KeyDownHandler($event);
      this.KeyDownHandler.emit($event);
    }
  }

  getColumns(): any {
    return this.model.getColumns();
  }

  setSelectedItem(): void {
    if (this.kendoGridComponent && this.kendoGridComponent.navigable) {
      this.kendoGridComponent.focusCell(
        this.model.SelectedIndex,
        this.model.SelectedColumnIndex
      );
    }
  }

  @Input()
  get data(): any {
    return this.internalData;
  }

  set data(value: any) {
    /* tslint:disable-next-line:no-string-literal */
    if (value && typeof value['internalArray'] !== 'undefined') {
      /* tslint:disable-next-line:no-string-literal */
      this.internalData = value['internalArray'];
    } else {
      this.internalData = value;
    }
  }
}