import { Component, OnInit, Injectable, EventEmitter, TemplateRef, Output, Input } from '@angular/core';
import { Observable, Subscription } from 'rxjs';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, Validators, NgForm, FormControl } from '@angular/forms';
import { ApiService, PubSubService } from '../app.api.service';
import { EmployeeServices } from '../_services/employee/employee.service';
import { GridDataResult, PageChangeEvent, SelectableSettings } from '@progress/kendo-angular-grid';
import { Employee } from '../_models/Employee/employee';
import {DynamicPicker, EnumDynamicpickerType} from './dynamic-picker/Dynamic-Picker';
import { EnumGender } from '../_models/enums';
@Component({
  selector: 'app-single-employee-picker',
  templateUrl: './single-employee-picker.component.html',
})


export class SingleEmployeePickerComponent implements OnInit {

    public active = false;

    genders: EnumGender;

    public gridView: GridDataResult;
    public pageSize: number = 20;
    public skip:number = 0;

    public employeeCode: string;
    public employeeName: string;
    public employee: Employee;
    employees: Employee[] = [];

    public checkboxOnly: boolean = false;
    public mode:string = 'multiple';
    public selectableSettings: SelectableSettings;
    taggedSelection: number[] = [];

    private designationpicker: DynamicPicker;
    @Input() public set isActive(isActive: boolean) {
        this.active = isActive;
    }

    @Output() cancel: EventEmitter<any> = new EventEmitter();
    @Output() select: EventEmitter<any> = new EventEmitter();
    /** role-permission-entry ctor */
    constructor(public api: ApiService,
        public formBuilder: FormBuilder,
        public router: Router,
        public route: ActivatedRoute,
        public empSrvc: EmployeeServices) {
        this.designationpicker = new DynamicPicker(EnumDynamicpickerType.Designation, true);
        this.taggedSelection = [];
        this.setSelectableSettings();
    }

    ngOnInit() {

    }

    public loadGrid(): void {
        this.gridView = {
            data: this.employees.slice(this.skip, this.skip + this.pageSize),
            total: this.employees.length
        };
    }

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

    public pageChange(event: PageChangeEvent): void {
        this.skip = event.skip;
        this.loadGrid();
    }

    search() {

        const employeeCode = (this.employeeCode === undefined || this.employeeCode === null || this.employeeCode === '') ? null : this.employeeCode.trim();
        const employeeName = (this.employeeName === undefined || this.employeeName === null || this.employeeName === '') ? null : this.employeeName.trim();

        let data = {
            employeeCode: employeeCode,
            employeeName: employeeName
        };

        //this.empSrvc.getemployeespicker(data)
        //    .subscribe(
        //        (resp: any) => {
        //            this.employees = resp;
        //        },
        //        (err: any) => {
        //            //ON ERROR
        //        },
        //        () => {
        //            //ON Success
        //            this.loadGrid();
        //        }
        //    );
    }

    public onCancel(e): void {
        e.preventDefault();
        this.closeForm();
    }

    public onSelect(e): void {
        e.preventDefault();
        this.employee = new Employee();

        if (this.taggedSelection.length > 0) {
            this.taggedSelection.forEach(item => {
                this.employee = this.employees.find(x => x.id == item);
            });
        }
        this.select.emit(this.employee);
        this.active = false;
    }

    openSingleEmployeePicker() {
    }



    private closeForm(): void {
        this.active = false;
        this.cancel.emit();
    }

}