import { DataTableData } from '../../../models/data-table/DataTableData';
import { JsonSerializer } from '../../../utilities/JsonSerializer';
import { DataTableRequest } from '../../../models/data-table/DataTableRequest';
import { DatasetListingModel } from '../../../models/datasets/DatasetListingModel';
import { DatasetCriteria } from '../../../models/criteria/dataset/DatasetCriteria';
import { DataManagementPlanModel } from '../../../models/data-managemnt-plans/DataManagementPlanModel';
import { DatasetCriteriaComponent } from '../../../shared/components/criteria/datasets/datasets-criteria.component';
import { DataManagementPlanService } from '../../../services/data-management-plan/data-management-plan.service';
import { DatasetService } from '../../../services/dataset/dataset.service';
import { Component, ViewChild, OnInit, AfterViewInit, Input } from "@angular/core";
import { MatPaginator, MatSort, MatSnackBar } from "@angular/material";
import { Router, Params, ActivatedRoute } from "@angular/router";
import { TranslateService } from "@ngx-translate/core";
import { DataSource } from "@angular/cdk/table";
import { FormGroup, FormBuilder, FormControl, FormArray } from "@angular/forms"
import { Observable } from "rxjs/Observable";
import { PageEvent } from '@angular/material';
import { SelectionModel } from '@angular/cdk/collections';


@Component({
  selector: 'app-dataset-wizard-listing-component',
  templateUrl: 'dataset-wizard-listing.component.html',
  styleUrls: ['./dataset-wizard-listing.component.scss'],
})
export class DatasetWizardListingComponent implements OnInit {

  @ViewChild(MatPaginator) _paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(DatasetCriteriaComponent) criteria: DatasetCriteriaComponent;


  titlePrefix: String;
  datasets: DatasetListingModel[] = []

  @Input() dmpId: String;
  @Input() formGroup: FormGroup
  selection = new SelectionModel<Element>(true, []);

  statuses = [
    { value: '0', viewValue: 'Active' },
    { value: '1', viewValue: 'Inactive' }
  ];

  constructor(
    private datasetService: DatasetService,
    private router: Router,
    private languageService: TranslateService,
    public snackBar: MatSnackBar,
    public route: ActivatedRoute,
    public dataManagementPlanService: DataManagementPlanService
  ) {

  }


  ngOnInit() {
    this.route.params.subscribe((params: Params) => {
      if (this.dmpId != null)
        if (params['dmpLabel'] != undefined)
          this.titlePrefix = "for " + params['dmpLabel'];
    });
    let request: DataTableRequest<DatasetCriteria> = new DataTableRequest<DatasetCriteria>(null, null, null);
    request.criteria = new DatasetCriteria();
    request.criteria.dmpIds = [this.dmpId];
    this.datasetService.getPaged(request).subscribe(items => {
      this.datasets = JsonSerializer.fromJSONArray(items.data, DatasetListingModel)
    })
    this.formGroup.addControl("datasets", new FormBuilder().array(new Array<FormControl>()))
  }

  selectionChanged(event, selectedItems) {
    this.formGroup.removeControl("datasets");
    this.formGroup.addControl("datasets", new FormBuilder().array(new Array<FormControl>()))
    selectedItems.selectedOptions.selected.forEach(element => {
      (<FormArray>this.formGroup.get("datasets")).push(new FormBuilder().group({ id: element.value }))
    });
  }

}