import { Router, ActivatedRoute } from '@angular/router';
import { MdDialog, MdDialogConfig } from '@angular/material';
import { TdDataTableService, TdDataTableSortingOrder, ITdDataTableSortChangeEvent, ITdDataTableColumn } from '@covalent/core';
import { IPageChangeEvent } from '@covalent/core';
import { Component, AfterViewInit } from '@angular/core';
import { TdMediaService } from '@covalent/core';
import { PacksService } from './resources/packs';
import { PackFormComponent } from './forms/pack.form.component';
import { LocaleService } from './common/i18n';


var pack_example = { 
  id: 7,
  code: 'DX250000',
  status: 'AC',
  application_name: 'Doxr',
  created_by_id: 'admin',
  created_by_name: 'Administrator  (admin)',
  creation_timestamp: 1440597540000,
  end_valid_date: 2051222400000,
  init_valid_date: 1440547200000,
  license_preactivation: true,
  license_type_id: 5,
  licensetype_code: 'DXL3',
  metadata: 
   [ { key: 'max_docs',
       value: '250000',
       readonly: true,
       mandatory: true,
       pack_id: 7 } ],
  num_activations: 7,
  num_available: -2,
  num_creations: 7,
  num_licenses: 5,
  organization_id: 2,
  organization_name: 'CurisTec',
  preactivation_valid_period: 70,
  renew_valid_period: 0,
}

const DIALOG_OPTIONS : MdDialogConfig = {
  height: '80%', // can be px or %
  width: '45%', // can be px or %
}

@Component({
  selector: 'pack-list',
  templateUrl: 'src/app/pack.list.component.html'
})
export class PackListComponent implements AfterViewInit {
  data: any[] = [];
  columns: ITdDataTableColumn[] = [
    { name: 'code', label: 'Code', tooltip: 'License pack code' },
    { name: 'application_name', label: 'App name' },
    { name: 'licensetype_code', label: 'License type' },
    { name: 'organization_name', label: 'Organization' },
    { name: 'used_licenses', label: 'Licenses', tooltip: 'Initial/Available pack licenses' },
    { name: 'menu', label: '' }
  ];

  filteredData: any[] = this.data;
  filteredTotal: number = this.data.length;

  searchTerm: string = '';
  fromRow: number = 1;
  currentPage: number = 1;
  pageSize: number = 10;
  sortBy: string = 'code';
  sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Descending;
  filteredItems = this.data.length;
  pack_menu_options : any[] = [{
    command: 'edit',
    name: 'Edit'
  },{
    command: 'cancel',
    name: 'Cancel'
  }]
  
  packAction(action: any) {
    console.log(action.command);
  }

  isActionAvailable(pack : any) : boolean {
    return true;
  }

  constructor(private _dataTableService: TdDataTableService,
    private media: TdMediaService,
    private router: Router,
    private route: ActivatedRoute,
    private dialog: MdDialog,
    private $L: LocaleService,
    private packForm: PackFormComponent,
    private packs: PacksService) {
      this.packs.get().subscribe(
        list => {
          this.data = list;
          this.filter();
        },
        err => console.error(err)
      );
  }

  ngOnInit(): void {
    this.filter();
  }

  createPack() : void {
    var ref = this.dialog.open(PackFormComponent, DIALOG_OPTIONS);
    ref.componentInstance.isNew = true;
    ref.afterClosed().subscribe(result => {
      console.log(result);
      this.filter();
    });
  }

  showLicenses(pack: any) : void {
    this.router.navigate([`${pack.id}/licenses`], {relativeTo: this.route});
  }

  editPack(pack: any) : void {
    var ref = this.dialog.open(PackFormComponent, DIALOG_OPTIONS);
    ref.componentInstance.isNew = false;
    ref.componentInstance.data = pack;
    ref.afterClosed().subscribe(result => {
      console.log(result);
      this.filter();
    });
  }


  sort(sortEvent: ITdDataTableSortChangeEvent): void {
    this.sortBy = sortEvent.name === 'used_licenses' ? 'num_available' : sortEvent.name;
    this.sortOrder = sortEvent.order;
    this.filter();
  }

  search(searchTerm: string): void {
    this.searchTerm = searchTerm;
    this.filter();
  }

  page(pagingEvent: IPageChangeEvent): void {
    this.fromRow = pagingEvent.fromRow;
    this.currentPage = pagingEvent.page;
    this.pageSize = pagingEvent.pageSize;
    this.filter();
  }

  loadData() {

  }

  filter(): void {
    let newData: any[] = this.data;
    newData = this._dataTableService.filterData(newData, this.searchTerm, true);
    this.filteredTotal = newData.length;
    this.filteredItems = newData.length;
    newData = this._dataTableService.sortData(newData, this.sortBy, this.sortOrder);
    newData = this._dataTableService.pageData(newData, this.fromRow, this.currentPage * this.pageSize);
    this.filteredData = newData;
  }

  ngAfterViewInit(): void {
    this.media.broadcast();

  }
}