import { Component, Input, ElementRef, AfterViewInit } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';

export interface IGridWithChildColumItem {
  field: string,
  title: string,
  sortable?: boolean,
  width?: number,
  textAlign?: string,
  temptlate?: (e, r, a) => {}
}

@Component({
  selector: 'rd-grid-wchild',
  template: `
    <div class="row" style="margin:0 0 0.7rem 0" *ngIf="searchable">  
      <rd-input-text [(rd-model)]="searchText" rd-mode="search" rd-placeholder="Search..."></rd-input-text>
    </div>
    <div id="gridWithChild" class="m_datatable"></div>
  `
})
export class GridWithChild extends RdComponent implements AfterViewInit {
  constructor(private element: ElementRef) { super(); }

  @Input("rd-data") data: Array<object>;
  @Input("rd-columns") columns: Array<IGridWithChildColumItem> = [];
  @Input("rd-child-columns") childColumns: Array<IGridWithChildColumItem> = [];

  @Input("rd-page-size") pageSize = 10;
  @Input("rd-searchable") searchable: boolean = true;
  @Input("rd-height") height: number | string = null;

  container: any;
  dataTable: any;
  searchText: string;

  ngAfterViewInit() {
    this.container = this.jQuery(this.element.nativeElement).find(".m_datatable");
  }

  ngOnChanges(changes) {
    if (changes.data && changes.data.currentValue.length) {
      this.dataTable = this.jQuery(this.container).mDatatable(this.getOptions(this.data, this.columns, false));
    }
  }

  getOptions(data: Array<object>, columns: Array<IGridWithChildColumItem>, isChild: boolean) {
    let options = {
      data: {
        type: "local",
        source: data,
        pageSize: this.pageSize,
        saveState: {
          cookie: false,
          webstorage: false
        }
      },
      layout: {
        theme: "default",
        scroll: false,
        height: this.height,
        footer: false
      },
      sortable: true,
      filterable: false,
      pagination: true,
      search: {
        input: this.jQuery(this.element.nativeElement).find("input")
      },
      columns: columns
    }

    if (!isChild) {
      options["detail"] = {
        content: (e) => {
          this.jQuery(e.detailCell).mDatatable(this.getOptions(e.data.child, this.childColumns, true));
        }
      }
    }

    return options;
  }
}