import { FilterDialogComponent } from './../app/filter-dialog/filter-dialog.component';
import { filteredData, editingData } from './../data';
import { ImplementerDialogComponent } from './../app/implementer-dialog/implementer-dialog.component';
import { Component, Inject, OnInit, ViewChild } from '@angular/core';
import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { DataService } from 'src/app/data.service';
import { projectNewData } from 'src/data';
import {FormGroup, FormControl} from '@angular/forms';
import {MatDialog} from '@angular/material/dialog';
import * as $ from 'jquery';
import { StateDialogComponent } from 'src/app/state-dialog/state-dialog.component';
import { MatSnackBar, MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition } from '@angular/material/snack-bar';
import { MAT_DATE_FORMATS } from '@angular/material/core';

export const MY_DATE_FORMATS = {
  parse: {
    dateInput: 'DD.MM.YYYY',
  },
  display: {
    dateInput: 'DD.MM.YYYY',
    monthYearLabel: 'MMMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY'
  },
};

@Component({
  selector: 'ntt-gantt',
  templateUrl: './ntt-gantt.component.html',
  styleUrls: ['./ntt-gantt.component.css'],
  providers: [
    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS }
  ]
})
export class NttGanttComponent implements OnInit {
  @ViewChild('ganttObject')
  public ganttDefault!: GanttComponent;

  @ViewChild(MatPaginator) paginator: MatPaginator;

  public range = new FormGroup({
    start: new FormControl<Date | null>(new Date('12/01/2022')),
    end: new FormControl<Date | null>(new Date('01/31/2024')),
  });

  public data: any[] = [];
  public allResources: any[] = [];
  public resources: any[] = [];
  public userSupportGroup: string;
  public taskSettings: object = {};
  public labelSettings: object = {};
  public projectStartDate: Date = new Date('12/01/2022');
  public projectEndDate: Date = new Date('01/31/2024');
  public resourceFields: object ={};
  public editSettings: object = {};
  public tooltipSettings: object ={};
  public columns: object[] = [];
  public toolbar: any[] = [];
  public timelineSettings: object = {};
  public rendering: boolean = true;
  public blockedTaskIDs : number [] = [8];
  public selectionSettings : object = {};
  public spin: boolean = true;
  public sliceStart: number;
  public sliceEnd: number;
  public filterSettings: object;
  public splitterSettings : object;
  public renderGantt: boolean;
  public firstLoad: boolean;
  public selectedScalar: string;
  public scalars: string[];
  public showDetails: boolean = true;
  public panelOpenState:boolean;
  public showNoResultsError: boolean = false;
  public languages: string[] = ['DE', 'EN'];
  public language: string = 'DE';
  public horizontalPosition: MatSnackBarHorizontalPosition = 'end';
  public verticalPosition: MatSnackBarVerticalPosition = 'bottom';

  public deMap : Map<string, string> = new Map<string, string>()
  public enMap : Map<string, string> = new Map<string, string>()
  public lMap : Map<string, string> = new Map<string, string>()
  public attributes: any[] = [
    //{value: 'vertrag', viewValue: 'WI Vertrag'},
    {value: 'resourceName', viewValue: 'Name'},
    {value: 'status', viewValue: 'Status'},
    //{value: 'implementer', viewValue: 'Implementer'},
    {value: 'changeid', viewValue: 'Change Id'},
  ];

  public paketTypeList: any[] = [
    {name: 'Paket Typ A', checked: false},
    {name: 'Paket Typ B', checked: false},
    {name: 'Paket Typ C', checked: false},
  ];

  public stateList: any[] = [];

  public vertragList: any[] = [
    {name: 'Vertrag A', checked: false},
    {name: 'Vertrag B', checked: false},
    {name: 'Vertrag C', checked: false},
  ];

  public supportGroupList: any[] = [
    {name: 'SM ITSM', id: 'SG0001' },
    {name: 'Support Group B', id: 'SG0002' },
    {name: 'Support Group C', id: 'SG0003' },
  ];
  public selectedSupportGroup: any = this.supportGroupList[0];

  public filterStartDate: Date;
  public filterEndDate: Date;


  public selectedAttribute: string;
  public showFilters: boolean = false;

  //  ["=",">","<","beinhaltet"];
  public selectedFilter: string;
  public showCriterea: boolean = false;
  public criteria: string = '';
  public filterEnabled: boolean = false;
  public filters:any = null;
  public sortEnabled: boolean = false;
  public sortedData: any[] = [];

  private selectedRescourceIds : any[] = [];
  private selectedrowindex: number[] = [];
  private selectedrecords: any[] = [];
  private selRecs: any[] = [];
  public states : any[] = [];
  private approvalPending: boolean;
  public sort = null;
  public oldSort = null;


  /**
   * The constructor injects required dependencies
   * @param dataService injects the dataService for data management and backend communication
   * @param matDialog injects the matDialog
   */
  constructor(public dataService: DataService, public matDialog : MatDialog, private _snackBar: MatSnackBar ) {
    this.deMap.set('detailButton', 'Details anzeigen');
    this.enMap.set('detailButton', 'Show Details');
    this.deMap.set('filterButton', 'Filter anwenden');
    this.enMap.set('filterButton', 'Apply Filters');
    this.deMap.set('sortButton', 'Sortierung anwenden');
    this.enMap.set('sortButton', 'Apply Sort');
    this.deMap.set('field1', 'Kurzbeschreibung');
    this.enMap.set('field1', 'Summary');
    this.deMap.set('dateRangeLabel', 'Datumsbereich auswählen');
    this.enMap.set('dateRangeLabel', 'Select Date Range');
    this.deMap.set('language', 'Sprache');
    this.enMap.set('language', 'Language');
    this.deMap.set('clearFilter', 'Filter Löschen');
    this.enMap.set('clearFilter', 'Clear Filter');

    this.deMap.set('tooltipSummary', 'Name');
    this.enMap.set('tooltipSummary', 'Name');
    this.deMap.set('tooltipState', 'Status');
    this.enMap.set('tooltipState', 'State');
    this.deMap.set('tooltipPaketType', 'Paket Typ');
    this.enMap.set('tooltipPaketType', 'Package Type');
    this.deMap.set('tooltipContract', 'Vertrag / Provider Cluster');
    this.enMap.set('tooltipContract', 'Contract / Provider Cluster');
    this.deMap.set('tooltipSupportGroupKv', 'KV SG');
    this.enMap.set('tooltipSupportGroupKv', 'KV SG');
    this.deMap.set('tooltipSupportGroupIh', 'IH SG');
    this.enMap.set('tooltipSupportGroupIh', 'IH SG');
    this.deMap.set('tooltipDate', 'Geplantes Start Datum');
    this.enMap.set('tooltipDate', 'Planned Start Date');

    this.deMap.set('permit', 'Zur Genehmigung');
    this.enMap.set('permit', 'Permit');
    this.deMap.set('genehmigen', 'Genehmigen');
    this.enMap.set('genehmigen', 'Approve');
    this.deMap.set('ablehnen', 'Ablehnen');
    this.enMap.set('ablehnen', 'Reject');
    this.deMap.set('stornieren', 'Stornieren');
    this.enMap.set('stornieren', 'Cancel');
    this.deMap.set('implementer', 'Implementer Eintragen');
    this.enMap.set('implementer', 'Enter Implementer');
    this.deMap.set('stateChange', 'Statusübergang');
    this.enMap.set('stateChange', 'State Transition');

    if(navigator.language=='de-DE'){
      this.language = 'DE';
    }else{
      this.language = 'EN';
    }

    this.initLanguge(true);
  }

  initLanguge(initial: boolean = false){

    if(this.language == 'DE'){
      this.dataService.selectedLanguage = 'DE';
      this.lMap = this.deMap;
      this.scalars = ['Woche-Tag', 'Monat-Woche', 'Jahr-Monat'];
      this.selectedScalar = 'Monat-Woche';
      this.columns = [
        { field: 'TaskName', headerText: 'Kurzbeschreibung', width: 250 },
        { field: 'stateName', headerText: 'Status', width: 250},
        { field: 'vertragName', headerText: 'Vertrag / Provider Cluster', width: 150 },
        { field: 'supportGroup', headerText: 'Gewählte Support Gruppe' },
        { field: 'StartDate', headerText: 'Geplantes Start-Datum', format : {type:'date', format:'dd.MM.yyyy'}}
      ]
    }
    else{
      this.dataService.selectedLanguage = 'EN';
      this.lMap = this.enMap;
      this.scalars = ['Week-Day', 'Month-Week', 'Year-Month'];
      this.selectedScalar = 'Month-Week';
      this.columns = [
        { field: 'TaskName', headerText: 'Summary', width: 250 },
        { field: 'stateName', headerText: 'State', width: 250},
        { field: 'vertragName', headerText: 'Contract / Provider Cluster', width: 150 },
        { field: 'supportGroup', headerText: 'Selected Support Group' },
        { field: 'StartDate', headerText: 'Planned Start-Date', format : {type:'date', format:'dd.MM.yyyy'}}
      ]
    }
    if(!initial){
      this.refreshData();
    }

  }


public logg(args){
  console.log(args);
}


  /**
   * The function ngOnInit sets values which are required for rendering the gantt Chart. Furthermore it trims the resources (Changes Array) and sets the paginator to the first page.
   */
  public ngOnInit(): void {
    var WebFont = require('webfontloader');
    WebFont.load({
       google: {
          families: [
             'Material Icons',
          ],
       },
    });
    this.renderGantt = false;
    this.firstLoad = true;
    this.sliceStart = 0;
    this.sliceEnd = 20;
    // this.dataService.fetchChanges().then((res: any[])=>{
    //   console.log(res);
    //     this.allResources = res;
    //     this.mapTasksToResources(0,20);
    //     this.range = new FormGroup({
    //       start: new FormControl<Date | null>(new Date('12/01/'+(new Date().getFullYear()-1))),
    //       end: new FormControl<Date | null>(new Date('01/31/'+(new Date().getFullYear()+1))),
    //     });
    //     this.renderGantt = true;
    // });
    this.dataService.fetchUserSupportGroup().then((res: any)=>{
      console.log(res);
      this.userSupportGroup = res.name;
      this.refreshData();
      this.states = this.dataService.getStates();
      this.dataService.fetchStates().then((res: any [])=>{
        this.states = res;
        this.stateList = res;
        this.spin = false;
        console.log(this.states);
      });
    });



    this.filterSettings = {
      ignoreAccent: true
      // columns: [
      //   { field: 'vertrag', matchCase: false, operator: 'startswith', predicate: 'and', value: 'WV' },
      // ]
    };

    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      endDate: 'EndDate',
      duration: 'Duration',
      progress: 'Progress',
      dependency: 'Predecessor',
      resourceInfo: 'resources',
      work: 'work',
      expandState: 'isExpand',
      child: 'subtasks',
      isFixed: 'isFixed',
      vertrag: 'vertrag'
    };
    this.resourceFields = {
      id: 'resourceId',
      name: 'resourceName',
      unit: 'Unit',
      group: 'resourceGroup',
      state: 'state',
      stateName: 'stateName',
      isRes: 'isRes',
      vertrag: 'vertrag',
      vertragName: 'vertragName',
      supportGroup: 'supportGroup',
      supportGroupId: 'supportGroupId',
      implementerEdit: 'implementerEdit'
    };
    this.editSettings = {
      allowAdding: true,
      allowEditing: true,
      allowDeleting: true,
      allowTaskbarEditing: true,
      showDeleteConfirmDialog: true
    };

    this.selectionSettings = {
      mode: 'Row',
      type: 'Multiple',
    };

    this.columns = [
         { field: 'TaskName', headerText: 'Kurzbeschreibung', width: 250 },
         { field: 'stateName', headerText: 'Status', width: 250},
         { field: 'vertragName', headerText: 'Vertrag / Provider Cluster', width: 150 },
         { field: 'supportGroup', headerText: 'Gewählte Support Gruppe' },
         { field: 'StartDate', headerText: 'Geplantes Start-Datum', format : {type:'date', format:'dd.MM.yyyy'}},
        //  { field: 'approvalStatus', headerText: 'Active Approval', width: 100 },
        // { field: 'supportGroupId' },
        //{ field: 'Duration' },
        //{ field: 'TaskID', headerText: 'Taks ID', width: 250 },
         //{ field: 'work', headerText: 'Work' },
         //{ field: 'Progress' },
         //{ field: 'resourceGroup', headerText: 'Group' },
     ];

    this.toolbar = ['Cancel'];
    this.labelSettings = {
      rightLabel: 'resources',
      taskLabel: 'TaskName'
     };

    this.timelineSettings= {
      topTier: {
          //format: 'YYYY',
          unit: 'Month'
      },
      bottomTier: {
          format: 'WW',
          unit: 'Week',
          count: 1
      }
    };
    this.tooltipSettings = {
      showTooltip: true,
      }
    this.splitterSettings = {
      columnIndex:3
    };


     this.projectStartDate = this.range.controls.start.value;
     this.projectEndDate = this.range.controls.end.value;


  }

  languageChange(args: any){
    console.log(this.language);
    this.initLanguge();
  }

  /**
   * The function taskbarEditing catches the corresponding syncfsuions event and cancels the user action if the isFixed flag of a task (Date) is set true
   * @param args event arguments from the syncfusion gantt chart
   */
  public taskbarEditing(args: any) {
    if(args.data.taskData.isFixed !== false ) {
      args.cancel = true;
    }
  }

  public renderDetails(){
    // console.log(this.showDetails);
    if(this.showDetails == false){
      this.refreshData();
    }else{
      this.refreshData();
    }

  }

  public changeScalar(){
    if(this.selectedScalar == this.scalars[0]){
      this.timelineSettings= {
        topTier: {
            //format: 'WW',
            unit: 'Week'
        },
        bottomTier: {
            format: 'dd',
            unit: 'Day',
            count: 1
        }
      };
    }

    if(this.selectedScalar == this.scalars[1]){
      this.timelineSettings= {
        topTier: {
            //format: 'YYYY',
            unit: 'Month'
        },
        bottomTier: {
            format: 'WW',
            unit: 'Week',
            count: 1
        }
      };
    }

    if(this.selectedScalar == this.scalars[2]){
      this.timelineSettings= {
        topTier: {
            //format: 'YYYY',
            unit: 'Year'
        },
        bottomTier: {
            format: 'MM',
            unit: 'Month',
            count: 1
        }
      };
    }

  }

  /**
   * The function taskbarEdited catches the corresponding syncfsuions event and cancels the user action if the isFixed flag of a task (Date) is set true
   * If the isFixed flag is false, it triggers the dataService to update the moved date
   * @param args event arguments from the syncfusion gantt chart
   */
  public taskbarEdited(args: any){
    if(args.data.taskData.isFixed !== false ) {
    args.cancel = true;
    }else{
      const found = this.allResources.find((resource) => {
        return resource.resourceId == args.data.taskData.resources[0].resourceId;
      });
      this.dataService.updateDatePerChange(found);

    }
  }

  /**
   * The function queryTaskbarInfo catches the corresponding syncfsuions event and colors the respective diamond depending on the status
   * @param args event arguments from the syncfusion gantt chart
   */
  public queryTaskbarInfo(args: any) {
    if(args.data.taskData.isRes == false){
      if(args.data.taskData.TaskID.includes("D2")){
        if (args.data.taskData.resources[0].state == 0 ) {
          args.milestoneColor = "red";
        }
        if (args.data.taskData.resources[0].state == 1 ) {
          args.milestoneColor = "orange";
        }
        if (args.data.taskData.resources[0].state == 3 ) {
          args.milestoneColor = "yellow";
        }
        if (args.data.taskData.resources[0].state == 6 ) {
          args.milestoneColor = "lightgreen";
        }
        if (args.data.taskData.resources[0].state >= 10 ) {
          args.milestoneColor = "lightgrey";
        }
      }else{
        if (args.data.taskData.TaskID.includes("D1")||args.data.taskData.TaskID.includes("D4")){
          if(this.showDetails == false){
            args.taskbarElement.innerHTML = "";
          }else{
            if(args.data.taskData.TaskID.includes("D1")){
              args.milestoneColor = "#d4d4d4";
            }
            if(args.data.taskData.TaskID.includes("D4")){
              args.milestoneColor = "#a1a1a1";
            }
          }
        }
        if (args.data.taskData.TaskID.includes("D3")){
          args.milestoneColor = "#bababa";
        }
      }
    }
  }

  /**
   * The function onExpand catches the corresponding syncfsuions event and avoids a chart row from beeing expanded by the user
   * @param args event arguments from the syncfusion gantt chart
   */
  public onExpand(args: any){
    args.cancel = true;
  }

  /**
   * The function actionBegin catches the corresponding syncfsuions event
   * @param event event arguments from the syncfusion gantt chart
   */


  /**
   * The function mapTasksToResources slices the allResources array to the resources array according the actual page conditions maps the actual tasks (Dates) to the actual resources (Changes)
   * This function is triggered when a pageEvent is thrown respectively a user changes the page on the paginator
   * @param start begin of slice
   * @param end end of slice
   */
  public mapTasksToResources(start : number, end : number){
    this.data = [];
    this.resources = this.allResources; //.slice(start, end);
    for (const resource of this.resources) {
      for (const task of resource.tasks) {
        this.data.push(task);
      }
    }
    console.log(this.resources[this.resources.length-1]);
    this.resources.push({resourceId: 'Timeline', resourceName: 'Planzeit Summen pro Woche'})
  }

  /**
   *  The function load catches the corresponding syncfsuions event and triggers the loading spinner to start while the gantt chart is refrehshing
   * @param args event arguments from the syncfusion gantt chart
   */
  public load(args: any) {
    this.spin = true;
  }

  /**
   * The function dataBound catches the corresponding syncfsuions event and stops the loading spinner
   * @param args event arguments from the syncfusion gantt chart
   */
  public dataBound(args: any) {
    this.spin = false;
  }

  /**
   * The function created catches the corresponding syncfsuions event and stops the internal loading spinner
   * @param args event arguments from the syncfusion gantt chart
   */
  public created(args: any) {
    this.ganttDefault.hideSpinner();
    this.ganttDefault.treeGrid.grid.hideSpinner();

  }

  /**
   * The function onChange catches the corresponding syncfsuions event
   * @param args event arguments from the syncfusion gantt chart
   */
  public onChange(args: any){

  }

  /**
   * The function handlePageEvent catches the corresponding matpaginator event and slices the gantt chart, that it fits to the actual page
   * @param e pageEvent from the matpaginator
   */
  public handlePageEvent(e: PageEvent):void {
    let start = e.pageSize*e.pageIndex;
    let end = start+ e.pageSize;
    this.sliceStart = start;
    this.sliceEnd = end;
    //this.mapTasksToResources(start, end);
    //this.quickRefresh();
    this.refreshData();
    // this.ganttDefault.dataSource = this.data;
    // this.ganttDefault.resources = this.resources;
    // this.ganttDefault.refresh();

  }

  /**
   * The function startDateChanged catches the corresponding date-range-picker event
   * @param startDate new startDate from date-range-picker
   */
  public startDateChanged(startDate: any){
  }

  /**
   * The function endDateChanged catches the corresponding date-range-picker event and validates the selected start- and enddate bacause the gantt chart needs a valid Date to be displayed
   * @param endDate new endDate from date-range-picker
   */
  public endDateChanged(endDate: any){
    if(this.range.status == 'VALID' && this.range.controls.start.value && this.range.controls.end.value){ //event for Requesting new Records based on the Dates
      this.projectStartDate = new Date(this.range.controls.start.value);
      this.projectEndDate = new Date(this.range.controls.end.value);
    }
  }
  public rowSelecting(args: any){
    console.log(args)
    if(args.data.length){
      // if((args.data.length == this.resources.length+1)){
      //   console.log("all")
      // }else{
      //   if(args.data[args.data.length-1].TaskID == 'Timeline'){
      //     args.cancel = true;
      //   }
      // }
      if(args.data[args.data.length-1].TaskID == 'Timeline'){
        let data = args.data;
        data.pop();
        args.data = data;
      }

    }else{
      if(args.data.TaskID == 'Timeline'){
        args.cancel = true;
      }
    }

  }

  /**
   * The function rowSelected catches the corresponding syncfsuions event and checks if all selected resources (changes) have the same status, then it displays the corresponding buttons
   * @param args event arguments from the syncfusion gantt chart
   */
  public rowSelected(args: any) {

    this.approvalPending = false;
    this.selectedrowindex = this.ganttDefault.selectionModule.getSelectedRowIndexes();  // get the selected row indexes.
    this.selectedrecords = this.ganttDefault.selectionModule.getSelectedRecords();  // get the selected records.
    this.selRecs=[];
    if(this.selectedrowindex.length>this.resources.length-1){
      for (const record of this.selectedrecords) {
        if(record.taskData.isRes == true){
          this.selRecs.push(record);
        }
      }
    }else{
      this.selRecs = this.selectedrecords;
    }
    let allStates: boolean = true;
    let allPermit: boolean = true;
    let allApprove: boolean = true;
    let allReject: boolean = true;
    let allCancel: boolean = true;
    let allImplementer: boolean = true;
    let allTransition: boolean = true;
    this.selectedRescourceIds = [];
    for (const change of this.selRecs) {
      if(change.taskData.approvalStatus == 1){
        this.approvalPending = true;
        }
      if(change.taskData.state == this.selRecs[0].taskData.state){
        if(allStates){
          allStates = true;
        }
        this.selectedRescourceIds.push(change.taskData.resourceId);
        }else{
          allStates = false;
        }

      if(change.taskData.flagPermit == true && allPermit == true){
        allPermit = true;
      }else{
        allPermit = false;
      }
      if(change.taskData.flagApproval == true && allApprove == true){
        allApprove = true;
      }else{
        allApprove = false;
      }
      if(change.taskData.flagReject == true && allReject == true){
        allReject = true;
      }else{
        allReject = false;
      }
      if(change.taskData.flagCancel == true && allCancel == true){
        allCancel = true;
      }else{
        allCancel = false;
      }
      if(change.taskData.implementerEdit == true && allImplementer == true){
        allImplementer = true;
      }else{
        allImplementer = false;
      }
      if(change.taskData.state > 0 && allTransition == true){
        allTransition = true;
      }else{
        allTransition = false;
      }
    }

    if(allStates){
      this.toolbar = [];
      if(allTransition){
        this.toolbar.push({text:this.lMap.get("stateChange"), id: "6"});
      }
      if(allPermit){
        this.toolbar.push({text: this.lMap.get("permit"), id: "5"});
      }
      if(allApprove){
        this.toolbar.push({text: this.lMap.get("genehmigen"), id: "7"});
      }
      if(allReject){
        this.toolbar.push({text: this.lMap.get("ablehnen"), id: "8"});
      }
      if(allCancel){
        this.toolbar.push({text: this.lMap.get("stornieren"), id: "11"});
      }
      if(allImplementer){
        this.toolbar.push({text: this.lMap.get("implementer"), id: "10"});
      }

    }else{
      this.toolbar = [];
    }


    this.approvalPending = false;
    this.selRecs = [];
    this.selectedrecords = [];
    this.selectedrowindex = [];
  }

  /**
   * The function rowDeselected catches the corresponding syncfsuions event
   * When a line is deselected, it is checked if all resource states are equal after deselecting a resource, if they are equal then the respective buttons are displayed
   * @param args event arguments from the syncfusion gantt chart
   */
  public rowDeselected(args: any){
    this.selectedRescourceIds.forEach((element,index)=>{
      if(element == args.data.taskData.resourceId) delete this.selectedRescourceIds[index]; //TODO: auf memoryLeak prüfen
    });

      this.selectedrowindex= this.ganttDefault.selectionModule.getSelectedRowIndexes();  // get the selected row indexes.
      this.selectedrecords= this.ganttDefault.selectionModule.getSelectedRecords();  // get the selected records.
      this.selRecs = [];
      if(this.selectedrowindex.length>this.resources.length-1){
        for (const record of this.selectedrecords) {
          if(record.taskData.isRes == true){
            this.selRecs.push(record);
          }
        }
      }else{
        this.selRecs = this.selectedrecords;
      }
        let allStates: boolean = true;
        let allPermit: boolean = true;
        let allApprove: boolean = true;
        let allReject: boolean = true;
        let allCancel: boolean = true;
        let allImplementer: boolean = true;
        let allTransition: boolean = true;
        this.selectedRescourceIds = [];
        for (const change of this.selRecs) {
          if(change.taskData.state == this.selRecs[0].taskData.state){
            if(change.taskData.approvalStatus == 1){
              this.approvalPending = true;
              }
          if(allStates){
            allStates = true;
          }
            this.selectedRescourceIds.push(change.taskData.resourceId);
          }else{
            allStates = false;
          }


      if(change.taskData.flagPermit == true && allPermit == true){
        allPermit = true;
      }else{
        allPermit = false;
      }
      if(change.taskData.flagApproval == true && allApprove == true){
        allApprove = true;
      }else{
        allApprove = false;
      }
      if(change.taskData.flagReject == true && allReject == true){
        allReject = true;
      }else{
        allReject = false;
      }
      if(change.taskData.flagCancel == true && allCancel == true){
        allCancel = true;
      }else{
        allCancel = false;
      }
      if(change.taskData.implementerEdit == true && allImplementer == true){
        allImplementer = true;
      }else{
        allImplementer = false;
      }
      if(change.taskData.state > 0 && allTransition == true){
        allTransition = true;
      }else{
        allTransition = false;
      }

    }
    if(allStates){
      this.toolbar = [];
      if(allTransition){
        this.toolbar.push({text:this.lMap.get("stateChange"), id: "6"});
      }
      if(allPermit){
        this.toolbar.push({text: this.lMap.get("permit"), id: "5"});
      }
      if(allApprove){
        this.toolbar.push({text: this.lMap.get("genehmigen"), id: "7"});
      }
      if(allReject){
        this.toolbar.push({text: this.lMap.get("ablehnen"), id: "8"});
      }
      if(allCancel){
        this.toolbar.push({text: this.lMap.get("stornieren"), id: "11"});
      }
      if(allImplementer){
        this.toolbar.push({text: this.lMap.get("implementer"), id: "10"});
      }

    }else{
      this.toolbar = [];
    }
        this.selRecs = [];
        this.selectedrecords = [];
        this.selectedrowindex = [];
        this.approvalPending = false;

  }

  /**
   * The function toolbarBtnClicked catches the corresponding syncfsuions event and executes the button logic when a button is clicked
   * @param args
   */
  public toolbarBtnClicked(args :any){

    if(args.item.text === "Statusübergang" || args.item.text === "State Transition"){
      let data = {changes: [], states: this.states};
      for (const selectedRescourceId of this.selectedRescourceIds) {
        for (const iterator of this.resources) {
          if(iterator.resourceId == selectedRescourceId){
            data.changes.push({resourceId: iterator.resourceId, changeNr: iterator.changeNr, currentState: iterator.state});
          }
        }
      }
      let dialogRef = StateDialogComponent;
      this.matDialog.open(dialogRef,
      {
        data : data,
      }).afterClosed().subscribe((res)=>{
        if(res=="Success"){
          this.refreshData();
        }

      });
    }

    if(args.item.text === "Implementer Eintragen" || args.item.text === "Enter Implementer"){
      let data = {changes: []};
      for (const selectedRescourceId of this.selectedRescourceIds) {
        for (const change of this.resources) {
          if(change.resourceId == selectedRescourceId){
            // console.log(change);
            data.changes.push({resourceId: change.resourceId, pkgId: change.changeNr, supportGroupId: change.supportGroupId});
          }
        }
      }
      this.matDialog.open(ImplementerDialogComponent,
      {
        data : data,
      });

    }

    if(args.item.text === "Genehmigen" || args.item.text === "Approve"){

      for (const selectedRescourceId of this.selectedRescourceIds) {
        for (const change of this.resources) {
          if(change.resourceId == selectedRescourceId){
            this.dataService.updateApproval(change, 1).then((res: any)=>{
              if(res.status == 200){
                this._snackBar.open("Genehmigung erfolgreich", 'Schließen', {
                  horizontalPosition: this.horizontalPosition,
                  verticalPosition: this.verticalPosition,
                  panelClass: ['mat-primary']
                });
              }else{
                this._snackBar.open(res.HttpErrorResponse.message, 'Schließen', {
                  horizontalPosition: this.horizontalPosition,
                  verticalPosition: this.verticalPosition,
                  panelClass: ['mat-primary']
                });
              }
              this.refreshData();
            });
          }
        }
      }
      //this.ganttDefault.refresh();
    }

    if(args.item.text === "Zur Genehmigung" || args.item.text === "Permit"){
      let data = {changes: [], states: this.states};
      for (const selectedRescourceId of this.selectedRescourceIds) {
        for (const iterator of this.resources) {
          if(iterator.resourceId == selectedRescourceId){
            data.changes.push({resourceId: iterator.resourceId, changeNr: iterator.changeNr, currentState: iterator.state});
          }
        }
      }
      let dialogRef = StateDialogComponent;
      this.matDialog.open(dialogRef,
      {
        data : data,
      }).afterClosed().subscribe((res)=>{
        if(res.status == 200){
          this.refreshData();
        }

      });
    }



    if(args.item.text === "Ablehnen" || args.item.text === "Reject"){
      for (const selectedRescourceId of this.selectedRescourceIds) {
        for (const change of this.resources) {
          if(change.resourceId == selectedRescourceId){
            this.dataService.updateApproval(change, 2).then((res: any)=>{
              if(res.status == 200){
                this._snackBar.open("Ablehnen erfolgreich", 'Schließen', {
                  horizontalPosition: this.horizontalPosition,
                  verticalPosition: this.verticalPosition,
                  panelClass: ['mat-primary']
                });
              }else{
                this._snackBar.open(res.HttpErrorResponse.message, 'Schließen', {
                  horizontalPosition: this.horizontalPosition,
                  verticalPosition: this.verticalPosition,
                  panelClass: ['mat-primary']
                });
              }
              this.refreshData();
            });
          }
        }
      }
      //this.ganttDefault.refresh();
    }

    if(args.item.text === "stornieren" || args.item.text === "Cancel"){
      for (const selectedRescourceId of this.selectedRescourceIds) {
        for (const change of this.resources) {
          if(change.resourceId == selectedRescourceId){
            this.dataService.updateApproval(change, 3).then((res: any)=>{
              if(res.status == 200){
                this._snackBar.open("Stornieren erfolgreich", 'Schließen', {
                  horizontalPosition: this.horizontalPosition,
                  verticalPosition: this.verticalPosition,
                  panelClass: ['mat-primary']
                });
              }else{
                this._snackBar.open(res.HttpErrorResponse.message, 'Schließen', {
                  horizontalPosition: this.horizontalPosition,
                  verticalPosition: this.verticalPosition,
                  panelClass: ['mat-primary']
                });
              }
              this.refreshData();
            });
          }
        }
      }
      //this.ganttDefault.refresh();
    }
  }





  quickRefresh(){
    this.renderGantt = false;
    let newData = [];
    for (const dat of this.data) {
      newData.push(dat);
    }
    this.data = newData;
    this.renderGantt = true;
  }

  refreshData(){
    //console.log(this.ganttDefault.splitterModule);
    this.showNoResultsError = false;
    this.renderGantt = false;
    this.dataService.fetchChanges(this.mapRequestJSON()).then((res: any[])=>{
      this.allResources = res;
        this.mapTasksToResources(this.sliceStart,this.sliceEnd);
        // console.log(this.allResources)
        if(res.length > 0){
          this.spin = true;
          this.renderGantt = true;
          this.showNoResultsError = false;
        }else{
          this.renderGantt = false;
          this.spin = false;
          this.showNoResultsError = true;
        }

    });



    // this.mapTasksToResources(this.sliceStart, this.sliceEnd);
    // this.data = [];
    // this.resources = this.allResources.slice(this.sliceStart, this.sliceEnd);
    // for (const resource of this.resources) {
    //   for (const task of resource.tasks) {
    //     this.data.push(task);
    //   }
    // }

  }
  clearFilter(){
      this.filters = null;
      this.filterEnabled = false;
      this.sort = null;
      this.sortEnabled = false;
      this.refreshData();
  }
  mapRequestJSON(){
    let request =
    {
      'sliceStart': this.sliceStart,
      'sliceEnd': this.sliceEnd,
      filter: this.filterEnabled ? this.filters : [{column: "SupportGroup", filter: "equals", criteria: [this.userSupportGroup]}],
      sort: this.sortEnabled ? this.sort : {
        'column': 'ChangeNr',
        'mode': 'asc'
      },

    }
    return request;
  }
private oldFilters:{};
  applyFilter(){
    if(this.filterEnabled){
      this.oldFilters = this.filters
      this.filters = null;
      this.refreshData();
    }else{
      this.filters = this.oldFilters;
      this.refreshData();
    }

  }
  openFilterDialog(){
    let dialogRef = FilterDialogComponent;
      this.matDialog.open(dialogRef,
      {
        data : [],
        height: '70%',
        width: '80%'
      }).afterClosed().subscribe((res)=>{
        if(res){
          // console.log(res);
          this.filters = res;
          this.filterEnabled = true;
          this.refreshData();
        }
      });


  }



  public buildFilterObject(){
    this.filterEnabled = true;
    let filter = []
    let critPaketTypeFilter = [];
    let critStateTypeFilter = [];
    let critVertragTypeFilter = [];
    let critSupportGroupfilter = {};
    let critDateFilter = {};
    let critTextFilter = {};


    for (const paketType of this.paketTypeList) {
      if(paketType.checked == true){
        critPaketTypeFilter.push(paketType.name);
      }
    }

    if(critPaketTypeFilter.length > 0){
      filter.push({
        "column": "paketType",
         "filter": "equals",
         "criteria": critPaketTypeFilter
        });
    }

    for (const state of this.stateList) {
      if(state.checked == true){
        critStateTypeFilter.push(state.stateNameEN);
      }
    }

    if(critStateTypeFilter.length > 0){
      filter.push({
        "column": "State",
         "filter": "equals",
         "criteria": critStateTypeFilter
        });
    }

    for (const vertrag of this.vertragList) {
      if(vertrag.checked == true){
        critVertragTypeFilter.push(vertrag.name);
      }
    }

    if(critVertragTypeFilter.length > 0){
      filter.push({
        "column": "Contract",
        "filter": "equals",
        "criteria": critVertragTypeFilter
        });
    }

//     filter.push({
//       "column": "supportGroup",
//       "filter": "equals",
//       "criteria": [this.selectedSupportGroup.id]
//       });

    if(this.filterStartDate != null && this.filterEndDate != null){
      filter.push({
        "column": "D2",
        "filter": "dateRange",
        "criteria": [this.filterStartDate, this.filterEndDate]
        });
    }

    if(this.criteria != null && this.criteria != ""){
      filter.push({
        "column": "ResourceName",
        "filter": "contains",
        "criteria": [this.criteria]
        });
    }
    this.filters = filter;
    this.refreshData();
  }
  public onResizing(args){
    let width ='' + args.paneSize[0]+'px';
    this.splitterSettings = {
      position: width
    };
  }
  public actionBegin(args: any) {
     console.log(args); //custom Action
     if(args.dialogModel){
      args.cancel = true;
      if(args.rowData.taskData.resources[0].state == 0){
        window.open("https://itsm-dev.asfinag.at/arsys/forms/itsm-app-dev/SHR%3ALandingConsole/Default+Administrator+View/?mode=search&F304255500=ASF:WI_TAS_Paket&F1000000076=FormOpenNoAppList&F303647600=SearchTicketWithQual&F304255610='1000000182' =\""+args.rowData.taskData.resources[0].changeNr+"\"", "_blank");
      }else{
        window.open("https://itsm-dev.asfinag.at/arsys/forms/itsm-app-dev/SHR%3ALandingConsole/Default+Administrator+View/?mode=search&F304255500=CHG:Infrastructure Change&F1000000076=FormOpenNoAppList&F303647600=SearchTicketWithQual&F304255610='1000000182' =\""+args.rowData.taskData.resources[0].changeNr+"\"", "_blank");
      }

     }else{
      if(args.requestType=='sorting'){
        let colName = "";
        let mode = "asc";
        args.cancel = true;

        switch (args.columnName) {
          case 'TaskName':
            colName = 'ResourceName';
            break;
          case 'stateName':
            colName = 'State';
            break;
          case 'supportGroup':
            colName = 'SupportGroup';
            break;
          case 'approvalStatus':
            colName = 'ApprovalStatus';
            break;
          default:
            break;
        }
        if(colName != ''){
          this.sortEnabled = true;
          if(this.oldSort != null && this.oldSort.column == this.sort.column){
            mode = 'dsc'
          }
          this.oldSort = this.sort;
          this.sort = {
            'column': colName,
            'mode': mode
          }
          this.refreshData();
        }
      }
     }

  }
}