import { Component, EventEmitter, Input, OnInit, Output, OnChanges } from '@angular/core';
import { SelectableSettings } from '@progress/kendo-angular-grid';
import { DynamicPicker, EnumDynamicControlType, EnumDynamicpickerType, EnumFormView } from './Dynamic-Picker';
import { FormControl, FormGroup } from '@angular/forms';
import { CheckableSettings } from '@progress/kendo-angular-treeview';
import { ApiService } from '../../app.api.service';
import { HttpClient } from '@angular/common/http';
import { IntlService } from '@progress/kendo-angular-intl';
import { Observable, Subject } from 'rxjs';
import { ChangeDetectorRef, AfterContentChecked } from '@angular/core';

@Component({
    selector: 'app-dynamic-picker',
    templateUrl: './dynamic-picker.component.html',
    styleUrls: ['./dynamic-picker.component.css']
})
export class DynamicPickerComponent implements OnInit, OnChanges, AfterContentChecked {
    @Output() onSelectCompleted = new EventEmitter<any>();
    @Output() OnItemSelected = new EventEmitter<any>();
    @Output() cancel: EventEmitter<any> = new EventEmitter();
    public itemSelectedCompletedEvent: EventEmitter<any>;
    @Input() public dynamicPickerView: DynamicPicker;
    @Input() private pickerActive: EventEmitter<boolean>;
    //***************
    // Do not chnage this file without discussing shamim
    //***************
    @Input() gradeCodeChanged;
    @Input() deptNameChanged;
    @Input() degNameChanged;
    isEditMode: boolean = false;
    isgrade: boolean = false;
    isdept: boolean = false;
    isdeg: boolean = false;
    gradecode = '';
    deptName = '';
    degName = '';

    public opened = true;
    public selectableSettings: SelectableSettings;
    public checkboxOnly = false;
    public active: boolean;
    @Input() WithDropDown: boolean;
    public showDropdown: boolean;
    form: FormGroup;

    public enableCheck = true;
    public checkChildren = true;
    public checkParents = true;
    public checkOnClick = false;
    public checkMode: any = 'multiple';
    public selectionMode: any = 'single';
    @Input() DynamicPickerFormGroup: FormGroup;
    @Input() pickerformControlName: string = 'itemselected';

    @Input() fixedGrades: number[] = undefined;

    //private autoCmpList: Array<string>;
    private autolistItems: Array<{ id: number; name: string }> = [];
    private autolistItemsTreeView: Array<{ id: number; name: string }> = [];
    private autolistItemsSource: Array<Object> = undefined;
    private autolistItemsSourceForTree: Array<Object> = undefined;
    private selectedAutoCmptValue: any;
    constructor(private http: HttpClient,
        public intl: IntlService, public apiService: ApiService, private ref: ChangeDetectorRef) {
        this.setSelectableSettings();

        if (this.DynamicPickerFormGroup == undefined) {
            this.DynamicPickerFormGroup = new FormGroup({
                itemselected: new FormControl(''),
            });
        }
    }


    ngAfterContentChecked() {
        this.ref.detectChanges();
    }

    toFormGroup() {
        const group: any = {};
        this.dynamicPickerView.searchControls.forEach(question => {
            let fromctl: FormControl;
            if (question.controlType === EnumDynamicControlType.DateTime) {
                fromctl = new FormControl(new Date() || '');
            } else {
                if (question.value !== undefined) {
                    fromctl = new FormControl(question.value || '');
                } else {
                    fromctl = new FormControl('');
                }
            }
            group[question.controlID] = fromctl;
        });
        return new FormGroup(group);
    }


    public get checkableSettings(): CheckableSettings {
        if (this.dynamicPickerView.multiSelect === false) {
            this.checkMode = 'single';
        }
        return {
            checkChildren: true,
            checkParents: false,
            enabled: this.dynamicPickerView.multiSelect,
            mode: this.checkMode,
            checkOnClick: true
        };
    }


    ngOnInit() {
        if (this.pickerActive) {
            this.pickerActive.subscribe(data => {
                this.active = data;
            });
        }

        this.showDropdown = true;
        if (this.WithDropDown === undefined) {
            this.WithDropDown = false;
            this.showDropdown = false;
        }
        if (this.dynamicPickerView === undefined) {
            alert('Picker defination is not defined');
            return;
        }

        if (this.dynamicPickerView === undefined) {
            alert('Picker defination is not defined');
            return;
        }

        //     this.loadEditData();
        if (this.pickerActive) {
            this.pickerActive.subscribe(data => {
                this.active = data;
            });
        }

        this.opened = false;
        this.selectableSettings.mode = (this.dynamicPickerView.multiSelect === false) ? 'single' : 'multiple';

    }

    //loadEditData(){
    //    if(this.dynamicPickerView.selectedID !== undefined){
    //        this.DynamicPikerSearch();
    //    }
    //}


    private prepareAutoCmpList(sdata: string) {

        this.autolistItems = [];
        const sourceList: string[] = [];
        let code = '';
        let name = '';
        this.autolistItemsSource.forEach(item => {
            var ovalue = "";
            var internalID: number;
            for (let i = 0; i < Object.keys(item).length; i++) {
                this.dynamicPickerView.listViewColumn.forEach(col => {
                    if (col.filedID.toLowerCase() === Object.keys(this.autolistItemsSource[0])[i].toLowerCase()) {
                        if (col.filedID.toLowerCase() === 'code')
                            ovalue = ovalue + ' ' + item[Object.keys(item)[i]];
                        if (col.filedID.toLowerCase() === 'name')
                            ovalue = ovalue + '-' + item[Object.keys(item)[i]];
                    }
                });
                if (this.dynamicPickerView.idColumnName.toLowerCase() === Object.keys(this.autolistItemsSource[0])[i].toLowerCase()) {
                    internalID = item[Object.keys(item)[i]];;

                }
            }
            this.autolistItems.push({ 'id': internalID, 'name': ovalue });



        });
        this.autolistItems = this.autolistItems.filter(arrBirds => arrBirds.name.toLowerCase().includes(sdata.toLowerCase()));

    }

    handleFilter(value) {
        let str: string = value;
        if (value == undefined) {
            str = '';
        }
        var autocompleteData: any;
        this.dynamicPickerView.selectedIDs = [];
        this.dynamicPickerView.selectedID = undefined;
        if (this.dynamicPickerView.listViewData == undefined) {
            //this.apiService.httpPost<Array<object>>('/DynamicPicker' + '/PickerSearch', this.dynamicPickerView).subscribe(data => {

            //    this.autolistItemsSource = data;
            //},
            //    (err: any) => {
            //    },
            //    () => {
            //        this.prepareAutoCmpList(str);
            //    }
            //);
            this.DynamicPikerSearch(value);
        }
        else {
            this.prepareAutoCmpList(str);
        }

    }

    handleFilterTreeView(value) {
        let str: string = value;
        if (value == undefined) {
            str = '';
        }
        var autocompleteData: any;
        if (this.dynamicPickerView.listViewData !== undefined) {
            this.apiService.httpPost<Array<object>>('/DynamicPicker' + '/PickerSearch', this.dynamicPickerView).subscribe(data => {
                this.autolistItemsSourceForTree = data;
            },
                (err: any) => {
                },
                () => {
                    this.prepareAutoCmpListTreeView(str);
                }
            );
        }
        else {
            this.prepareAutoCmpListTreeView(str);
        }
    }

    private prepareAutoCmpListTreeView(sdata: string) {
        this.autolistItemsTreeView = [];
        const sourceList: string[] = [];
        let code = '';
        let name = '';
        this.autolistItemsSourceForTree.forEach(item => {
            var ovalue = "";
            var internalID: number;
            for (let i = 0; i < Object.keys(item).length; i++) {
                this.dynamicPickerView.listViewColumn.forEach(col => {
                    if (col.filedID.toLowerCase() === Object.keys(this.autolistItemsSourceForTree[0])[i].toLowerCase()) {
                        // ovalue = ovalue + ' ' + item[Object.keys(item)[i]];

                        if (col.filedID.toLowerCase() === 'code')
                            ovalue = ovalue + ' ' + item[Object.keys(item)[i]];
                        if (col.filedID.toLowerCase() === 'name')
                            ovalue = ovalue + '-' + item[Object.keys(item)[i]];

                        // ovalue = item[Object.keys(item)[i]];
                    }
                });
                if (this.dynamicPickerView.idColumnName.toLowerCase() === Object.keys(this.autolistItemsSourceForTree[0])[i].toLowerCase()) {
                    internalID = item[Object.keys(item)[i]];
                }
            }
            this.autolistItemsTreeView.push({ 'id': internalID, 'name': ovalue });
        });
        this.autolistItemsTreeView = this.autolistItemsTreeView.filter(arrBirds => arrBirds.name.toLowerCase().includes(sdata.toLowerCase()));

    }

    public valueChangeTree(item: any): void {
        //console.log(item);
        if (item !== undefined) {
            this.OnItemSelected.emit(item);
            var it = this.autolistItemsTreeView.find(x => x.name == item);
            if (it != undefined) {
                this.dynamicPickerView.selectedID = it.id;
                const str: string[] = it.name.trim().split(' ');
                var name = it.name.trim().substring(str[0].length, it.name.length).trim();
                this.dynamicPickerView.selecteditemText = name;

                this.dynamicPickerView.selectedObjects = [];
                var newitem: Array<{ id: number; name: string }> = [];
                newitem.push({ 'id': it.id, 'name': name });
                this.dynamicPickerView.selectedObjects.push(newitem[0]);
                this.dynamicPickerView.selectedIDs = [];
                this.dynamicPickerView.selectedIDs.push(it.id);
                this.onSelectCompleted.emit(it.id);
            }
        }
    }

    // onItemSelected(value) {
    //     let str: string = value || '';
    //     if (this.dynamicPickerView.listViewData !== undefined) {
    //         this.apiService.httpPost<Array<object>>('/DynamicPicker' + '/PickerSearch', this.dynamicPickerView).subscribe(
    //             data => {
    //                 this.autolistItemsSourceForTree = data;
    //                 this.autolistItems$.next(this.prepareAutoCmpListForTreeview(str));
    //             },
    //             error => {
    //                 console.error('Error fetching data:', error);
    //                 this.autolistItems$.next([]);
    //             }
    //         );
    //     } else {
    //         this.autolistItems$.next(this.prepareAutoCmpListForTreeview(str));
    //     }
    // }

    // private prepareAutoCmpListForTreeview(sdata: string): any[] {
    //     const autolistItems: any[] = [];
    //     this.autolistItemsSourceForTree.forEach(item => {
    //         var ovalue = "";
    //         var internalID: number;
    //         for (let i = 0; i < Object.keys(item).length; i++) {
    //             this.dynamicPickerView.listViewColumn.forEach(col => {
    //                 if (col.filedID.toLowerCase() === Object.keys(this.autolistItemsSourceForTree[0])[i].toLowerCase()) {
    //                     ovalue = ovalue + ' ' + item[Object.keys(item)[i]];
    //                 }
    //             });
    //             if (this.dynamicPickerView.idColumnName.toLowerCase() === Object.keys(this.autolistItemsSourceForTree[0])[i].toLowerCase()) {
    //                 internalID = item[Object.keys(item)[i]];
    //             }
    //         }
    //         autolistItems.push({ 'id': internalID, 'name': ovalue });
    //     });
    //     return autolistItems.filter(arrBirds => arrBirds.name.toLowerCase().includes(sdata.toLowerCase()));
    // }


    // searchItems(event: any) {
    //    
    // }
    // filteredItems: any[] = [];
    // onItemSelect(event: any) {
    //    
    // }

    public valueChange(item: any): void {
        //console.log(item);
        if (item !== undefined) {
            this.OnItemSelected.emit(item);
            var it = this.autolistItems.find(x => x.name == item);
            if (it != undefined) {
                //console.log(it);
                this.dynamicPickerView.selectedID = it.id;
                const str: string[] = it.name.trim().split(' ');
                //console.log(str);
                var name = it.name.trim().substring(str[0].length, it.name.length).trim();
                this.dynamicPickerView.selecteditemText = name;

                this.dynamicPickerView.selectedObjects = [];
                var newitem: Array<{ id: number; name: string }> = [];
                newitem.push({ 'id': it.id, 'name': name });
                this.dynamicPickerView.selectedObjects.push(newitem[0]);
                //console.log(this.dynamicPickerView.selectedObjects);

                this.dynamicPickerView.selectedIDs[0] = it.id;
                // this.onListSelectButtonClick();

                this.onSelectCompleted.emit(it.id);
            }
        }
    }

    DynamicPikerSearch(autoCompletevalue: any) {

        this.apiService.httpPost<Array<object>>('/DynamicPicker' + '/PickerSearch', this.dynamicPickerView).subscribe(data => {
            //console.log(data);
            this.dynamicPickerView.listViewData = data;
            this.autolistItemsSource = data;
            if (this.dynamicPickerView.pickerType == EnumDynamicpickerType.Grade && this.fixedGrades != undefined) {
                let gradeData: Array<Object> = [];
                this.dynamicPickerView.listViewData.forEach(col => {
                    if (this.fixedGrades.findIndex(x => x == col['id']) != -1) {
                        gradeData.push(col);
                    }
                });
                this.dynamicPickerView.listViewData = gradeData;
                if (this.dynamicPickerView.listViewData.length == 0) {
                    return;
                }
            }
            if (this.dynamicPickerView.pickerType == EnumDynamicpickerType.CostCenter) {
                this.dynamicPickerView.listViewData.forEach(element => {
                    element['name'] = element['codeName'];
                });
            }
            // tslint:disable-next-line:prefer-for-of
            for (let i = 0; i < Object.keys(this.dynamicPickerView.listViewData[0]).length; i++) {
                if (this.dynamicPickerView.fromViewType === EnumFormView.ListView) {
                    this.dynamicPickerView.listViewColumn.forEach(col => {
                        if (col.filedID.toLowerCase() === Object.keys(this.dynamicPickerView.listViewData[0])[i].toLowerCase()) {
                            col.filedID = Object.keys(this.dynamicPickerView.listViewData[0])[i];

                        }
                    });
                } else {
                    if (this.dynamicPickerView.treeNodeFieldID.toLowerCase() === Object.keys(this.dynamicPickerView.listViewData[0])[i].toLowerCase()) {
                        this.dynamicPickerView.treeNodeFieldID = Object.keys(this.dynamicPickerView.listViewData[0])[i];
                    }
                }
                if (this.dynamicPickerView.idColumnName.toLowerCase() === Object.keys(this.dynamicPickerView.listViewData[0])[i].toLowerCase()) {
                    this.dynamicPickerView.idColumnName = Object.keys(this.dynamicPickerView.listViewData[0])[i];

                }


            }

            if (this.dynamicPickerView.selectedID !== undefined) {
                //console.log(this.dynamicPickerView.selectedID);
                const data = this.dynamicPickerView.listViewData.find(item => item['id'] === this.dynamicPickerView.selectedID);
                if (data !== undefined) {
                    if (this.dynamicPickerView.fromViewType === EnumFormView.ListView) {
                        this.selectedAutoCmptValue = data['code'] + '-' + data['name'];
                    }
                    if (this.dynamicPickerView.fromViewType === EnumFormView.TreeView) {
                        this.selectedAutoCmptValue = data['code'] + '-' + data['name'];
                        this.dynamicPickerView.selecteditemText = data['code'] + '-' + data['name'];
                    }
                }
            }
            if (autoCompletevalue != undefined) {
                this.prepareAutoCmpListTreeView(autoCompletevalue);
            }

        },
            (err: any) => {
                console.log(err);
                // ON ERROR
            }
            ,
            () => {

            }
        );

    }

    search(): Observable<Array<object>> {
        let objdata;
        this.http.post<Array<object>>(this.apiService.base_url + 'DynamicPicker' + '/PickerSearch', this.dynamicPickerView).subscribe(
            response => {
                objdata = response;
            },
            err => console.log(err)
        );
        return objdata;
    }

    public setSelectableSettings(): void {
        this.selectableSettings = {
            checkboxOnly: this.checkboxOnly,
            mode: 'single'// this.mode
        };
    }

    onListSelectButtonClick(): void {
        if (this.dynamicPickerView.selectedIDs === undefined || this.dynamicPickerView.selectedIDs.length === 0) {
            alert('Please Select an Item.');
        } else {
            let idIndex = 0;
            for (let i = 0; i < Object.keys(this.dynamicPickerView.listViewData[0]).length; i++) {
                if (Object.keys(this.dynamicPickerView.listViewData[0])[i].toLowerCase() === this.dynamicPickerView.idColumnName.toLowerCase()) {
                    idIndex = i;
                    break;
                }
            }
            let selectedtext = '';
            this.dynamicPickerView.selectedObjects = [];
            this.dynamicPickerView.listViewData.forEach(rawdata => {
                this.dynamicPickerView.selectedIDs.forEach(sel => {
                    if (rawdata[Object.keys(rawdata)[idIndex]] === sel) {
                        this.dynamicPickerView.selectedObjects.push(rawdata);
                        let str = '';
                        this.dynamicPickerView.listViewColumn.forEach(col => {
                            for (let k = 0; k < Object.keys(rawdata).length; k++) {

                                if (col.showInPickerMain === true && col.filedID.toLowerCase() === Object.keys(rawdata)[k].toLowerCase()) {
                                    str = str + rawdata[Object.keys(rawdata)[k]] + '-';
                                    break;
                                }
                            }
                        });
                        if (str.length > 2) {
                            str = str.substring(0, str.length - 1);
                        }
                        selectedtext = selectedtext + str + ',';
                    }
                });
            });
            if (selectedtext.length > 2) {
                selectedtext = selectedtext.substring(0, selectedtext.length - 1);
            }
            this.dynamicPickerView.selecteditemText = selectedtext;
            this.selectedAutoCmptValue = selectedtext;
            this.OnItemSelected.emit(this.selectedAutoCmptValue);
            var selectedValue: any;
            if (this.dynamicPickerView.multiSelect === false) {
                this.dynamicPickerView.selectedID = this.dynamicPickerView.selectedIDs[0];
                selectedValue = this.dynamicPickerView.selectedIDs[0];
            } else {
                selectedValue = this.dynamicPickerView.selectedIDs;
            }
            this.onSelectCompleted.emit(selectedValue);

            ////////////new
            if (this.isEditMode === true) {
                this.isEditMode = false;
                this.isgrade = false;
                this.isdeg = false;
                this.isdept = false;
            }
            //
            this.opened = false;
        }
    }

    public onCancelButtonClick(): void {

        this.opened = false;
    }

    TreeViewNodeClear() {

        this.dynamicPickerView.selectedIDs = [];

    }

    public open() {
        //this.dynamicPickerView.selectedID = 0;
        // this.dynamicPickerView.selectedIDs = [];
        this.dynamicPickerView.selecteditemText = '';
        if (this.dynamicPickerView.listViewData == undefined)
            this.DynamicPikerSearch(undefined);

        this.opened = true;
    }

    public clear() {
        this.dynamicPickerView.selectedID = undefined;
        this.dynamicPickerView.selectedIDs = [];
        this.dynamicPickerView.selecteditemText = '';
        this.dynamicPickerView.selectedObjects = [];
        this.selectedAutoCmptValue = '';
        this.onSelectCompleted.emit(undefined);
        this.OnItemSelected.emit(undefined);

    }

    public close() {
        this.opened = false;
        this.cancel.emit(undefined);
    }

    public getformat(column) {
        if (Date.parse(column.filedID)) {
            return '{0:dd.MM.yyyy}';
        } else {
            return '';
        }
    }

    //new
    ngOnChanges() {
        this.isEditMode = false;
        //this.gradeCodeChanged.subscribe(data => {
        //    this.dynamicPickerView.selecteditemText = data;
        //});
        //this.deptNameChanged.subscribe(data => {
        //    this.dynamicPickerView.selecteditemText = data;
        //});
        //this.degNameChanged.subscribe(data => {
        //    this.dynamicPickerView.selecteditemText = data;
        //});
        if (this.gradeCodeChanged != undefined) {
            this.isgrade = true;
            this.isdeg = false;
            this.isdept = false;
            this.isEditMode = true;
            this.gradecode = this.gradeCodeChanged;

        }
        if (this.deptNameChanged != undefined) {
            this.isgrade = false;
            this.isdeg = false;
            this.isdept = true;
            this.isEditMode = true;
            this.deptName = this.deptNameChanged;
        }
        if (this.degNameChanged != undefined) {
            this.isgrade = false;
            this.isdeg = true;
            this.isdept = false;
            this.isEditMode = true;
            this.degName = this.degNameChanged;
        }
        //  this.isEditMode = false;
    }
}