import { Observable } from 'rxjs/Observable';
import { Component, OnInit, Inject, ViewChild, NgZone } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';

import { GridDataResult, PageChangeEvent, GridComponent } from '@progress/kendo-angular-grid';
import { State, process, SortDescriptor, orderBy } from '@progress/kendo-data-query';


import { RootService } from '../../../_services/root.service';
import { KGridHelper } from '../../../_helpers/k-grid.class';
import { take } from 'rxjs/operators/take';
import { DropDownsHR } from '../../../_helpers/dropdowns.class';
import { DesignationFilters, Designation } from './designations.class';
import { DBColumn } from '../database.class';

@Component({
    selector: 'app-designations',
    templateUrl: './designations.component.html',
    styles: [`
    .k-danger {
        color: #ff4c4b !important;
    }
    .k-danger:hover {
        background: #ff4c4b;
        color: white !important;
    }
   /*  .k-grid-content {
        overflow-y: scroll !important;
      } */
    `]
})

export class DesignationsComponent implements OnInit {
    @ViewChild('grid') public grid: GridComponent;
    public kGrid: KGridHelper = new KGridHelper();
    public dropDowns: DropDownsHR = new DropDownsHR();
    public designationFilters: DesignationFilters = new DesignationFilters();
    public designation: Designation = new Designation();
    public designations: any[] = [];
    public columns: DBColumn[] = [];
    public elcColumns: DBColumn[] = [
        { name: "id", value: false },
        { name: "user", value: false },
        { name: "dateTime", value: false },
        { name: "isActive", value: false },
    ];
    public allColumns: boolean = false;
    public showFilters = true;
    public showCheckBoxes = false;
    public showIds = false;
    public windowOpened = false;
    public windowWidth = 100;
    public windowState = 'maximized';
    public mySelection: any[] = [];
    public dialogOpened = false;
    public editDialogOpened = false;
    public viewDialogOpened = false;
    public values: any;
    constructor(private _rootService: RootService, private ngZone: NgZone) {
        this.kGrid.loading = false;
        this.kGrid.pageSize = 50;
        this.kGrid.pageSizes = [20,50, 100];
    }

    public ngOnInit(): void {
        this.loadDesignations();
        this.windowWidth = window.innerWidth;
    }
    public valueChanges(event, type) {
        console.log(event);
        if (type == '_idOperator') {
            this.designationFilters._idOperator = event;
        } else if (type == 'nameOperator') {
            this.designationFilters.nameOperator = event;
        }
        else if (type == '_cadreOperator') {
            this.designationFilters._cadreOperator = event;
        }
        else if (type == '_scaleOperator') {
            this.designationFilters._scaleOperator = event;
        }
        else if (type == 'gazattedOperator') {
            this.designationFilters.gazattedOperator = event;
        }
    }
    public setColumns(obj) {
        this.columns = [];
        let keys = Object.keys(obj);
        keys.forEach(key => {
            this.columns.push({ name: key, value: false });
        });
    }
    public makeObject() {
        this.designationFilters.columns = this.columns;
        console.log(this.designationFilters);
    }
    public columnSelected(event: any, isAll?: boolean, isELCColumn?: boolean) {
        let checkBoxValue = event.target.checked;
        debugger;
        if (isELCColumn) {
            if (isAll) {
                this.elcColumns.forEach(elcColumn => {
                    elcColumn.value = checkBoxValue;
                });
            } else if (!isAll) {
                let falseValueExist = this.elcColumns.find(x => x.value == false);
                this.designationFilters.allLogColumns = falseValueExist ? false : true;
            }
        } else {
            if (isAll) {
                this.columns.forEach(column => {
                    column.value = checkBoxValue;
                });
            } else {
                let falseValueExist = this.columns.find(x => x.value == false);
                this.designationFilters.allColumns = falseValueExist ? false : true;
            }
        }
    }
    public close(component) {
        this.dialogOpened = false;
        this.editDialogOpened = false;
        this.viewDialogOpened = false;
        if (component == 'window') {
            this.windowOpened = false;
        }
    }
    public onSubmit(val) {
        console.log(val);
        //this.loadDesignations();
    }
    public open(component) {
        this.windowOpened = false;
        this.editDialogOpened = false;
        this.viewDialogOpened = false;
        this.dialogOpened = true;
        this[component + 'DialogOpened'] = true;
    }
    public action(status) {
        console.log(`Dialog result: ${status}`);
        this.dialogOpened = false;
        this.editDialogOpened = false;
        this.viewDialogOpened = false;
    }
    public selectionChange(event) {
        console.log(event);
        this.loadDesignations();
    }
    public controlChange(event) {
        console.log(event);
        this[event] = !this[event];
        if (event == 'showCheckBoxes' || event == 'showIds') {
            this.fitColumns();
        }
    }
    private loadDesignations() {
        this.kGrid.loading = true;
       /*  this._rootService.GetDesignations({ skip: this.kGrid.skip, pagesize: this.kGrid.pageSize }).subscribe(
            response => this.handleResponse(response),
            err => this.handleError(err)
        ); */
    }
    private handleResponse(response: any) {
        console.log(response);
        this.kGrid.data = [];
        this.kGrid.data = response.List;
        this.kGrid.totalRecords = response.Count;
        this.kGrid.gridView = { data: this.kGrid.data, total: this.kGrid.totalRecords };
        this.kGrid.data[0] && this.columns.length == 0 ? this.setColumns(this.kGrid.data[0]) : [];
        this.kGrid.loading = false;
        this.fitColumns();
    }
    private handleError(err: any) {
        this.kGrid.loading = false;
    }

    public sortChange(sort: SortDescriptor[]): void {
        if (sort[0].field == 'asd') { return; }
        console.log(sort);

        this.kGrid.sort = sort;
        this.sortData();
    }
    private sortData() {
        this.kGrid.gridView = {
            data: orderBy(this.kGrid.data, this.kGrid.sort),
            total: this.kGrid.totalRecords
        };
    }
    public pageChange(event: PageChangeEvent): void {
        this.kGrid.skip = event.skip;
        this.loadDesignations();
    }
    public changePagesize(value: any) {
        this.kGrid.pageSize = +value;
        this.kGrid.skip = 0;
        this.loadDesignations();
    }
    private fitColumns(): void {
        this.ngZone.onStable.asObservable().pipe(take(1)).subscribe(() => {
            this.grid.autoFitColumns();
        });
    }
}