import { Injector, Component, ViewChild, AfterViewInit, HostBinding, ElementRef, OnInit, Directive, HostListener, Input, Output, EventEmitter, ViewContainerRef } from "@angular/core";
import { AppComponentBase } from "@shared/common/app-component-base";
import { appModuleAnimation } from "@shared/animations/routerTransition";
import { LocalStorageService } from "@shared/utils/local-storage.service";
import { Router } from "@angular/router";
import { ModalDirective, TabsetComponent } from "ngx-bootstrap";
import { LazyLoadEvent } from "primeng/api";
import * as moment from 'moment';
import { ProfileServiceProxy, CurrentUserProfileEditDto, OrderTypesServiceProxy, MobileAppVersionServiceProxy, ControllerRouteServiceProxy, LocatorServiceProxy } from '@shared/service-proxies/service-proxies';
@Component({
    selector: 'controllerHeaderFlyoutComponent',
    templateUrl: 'controller-header-flyout.component.html',
    animations: [appModuleAnimation()],
    styleUrls: ['controller-header-flyout.component.less'],
    providers: [MobileAppVersionServiceProxy]
})

export class ControllerHeaderFlyoutComponent extends AppComponentBase implements OnInit, AfterViewInit {

    @HostBinding('id') id = 'kt_quick_sidebar';
    @HostBinding('class')
    classes = 'kt-quick-panel';
    @HostBinding('attr.mQuickSidebarOffcanvas')

    @HostBinding('style.overflow') styleOverflow: any = 'hidden';

    mQuickSidebarOffcanvas: any;
    showLocationIcon: boolean = false;
    showPackageTypeIcon: boolean = false;
    showFleetIcon: boolean = false
    showDriverIcon: boolean = false
    showContactsIcon: boolean = false
    showCorporateIdentity: boolean = false
    showAccountsIcon = false

    hideEmpty: boolean = false;
    hideCompleted: boolean = true;
    hidePickedUp: boolean = true;
    rowsToShow: number = 50;
    todaysDate: Date;
    locationId: number;
    locations: any;
    filters: {
        locationFilter: number,
        statusFilter: number,
        typeFilter: number,
        startDate: Date,
        endDate: Date,
        orderStatusCode: string,
        orderType: string,
        osName: string
    } = <any>{};
    searchFilters: {
        route: string,
        vehicleName: string,
        driverName: string,
        showCompletion: boolean,
        routeIds: Array<number>,
        orderType: Array<string>,
        deviceType: string,
    } = < any > {};
    timezone: string;
    currentRoutes: any;
    public userProfile: CurrentUserProfileEditDto;
    filterRouteData = [];
    filteredOrderTypes: any;
    filteredMobileVersion: any;
    @Input() routeIds: Array<any> = [];
    @Input() routeSel: Array<any> = [];
    @Input() orderTypeIds: Array<any> = [];
    @Input() orderTypeSel: Array<any> = [];
    @ViewChild('controllerTab', { static: false }) staticTabs: TabsetComponent;
    completed: boolean = false;
    filterDate:any;
    constructor(

        injector: Injector,
        private _localStorageService: LocalStorageService,
        private el: ElementRef,
        private router: Router,
        private viewContainerRef: ViewContainerRef,
        private _profileService: ProfileServiceProxy,
        private _orderTypesServiceProxy: OrderTypesServiceProxy,
        private _mobileAppVersionServiceProxy: MobileAppVersionServiceProxy,
        private _controllerRouteServiceProxy: ControllerRouteServiceProxy,
        private _locatorAppService: LocatorServiceProxy

    ) {
        super(injector);
        this.todaysDate = new Date(Date.now());
        this.currentRoutes = this.router.url;
        this.currentRoutes = this.currentRoutes.toString().split('/');
        this.currentRoutes = this.currentRoutes[this.currentRoutes.length - 1];


    }

    _isOpen: boolean;
    _pinned = false;
    timeId: any;

    getParentComponent() {
        return this.viewContainerRef['_data'].componentView.component.viewContainerRef['_view'].component
    }
    ngOnInit(): void {
        this.timeId = localStorage.getItem('timeZoneId');
        moment.tz.setDefault(this.timeId);
        this.getFilter();

        if (localStorage.getItem('loadDate') == null) {
            $(".controllerDatePicker1").val(moment(this.todaysDate).format('YYY-MM-DD'));

        }
        else {
            //$(".controllerDatePicker1").val(moment(localStorage.getItem('loadDate')).format('MM/DD/YYYY'));
            $(".controllerDatePicker1").val(localStorage.getItem('loadDate'));
            // console.log($(".controllerDatePicker1").val());
        }

        if (localStorage.getItem('operatingLocationId') != null) {
            this.locationId = parseInt(localStorage.getItem('operatingLocationId'));
        }

        if(localStorage.getItem('operatingLocationId')!=null){
            this.filters.locationFilter = parseInt(localStorage.getItem('operatingLocationId'));
        }

        if(this.routeIds[0] != 0 && this.routeIds[0] != undefined){
            // this.filters.startDate = moment(localStorage.getItem('loadDate'));
            this.filterDate = localStorage.getItem('loadDate');
        }else{
            // this.todaysDate = moment(Date.now()).format();
            // this.filters.startDate = moment(this.todaysDate);
            this.filterDate = moment(Date.now()).local().format('YYYY-MM-DD');
            // this.route = [];
            this.routeSel = [];
            this.routeIds = [];
        }

        $('.kt-select2').select2();
        this.filterOrderTypes();
        this.filterMobileVersion();
        this.getRoutes();
    }

    ngAfterViewInit(): void {

        this.mQuickSidebarOffcanvas = new KTOffcanvas(this.el.nativeElement, {
            overlay: true,
            baseClass: 'kt-quick-panel',
            closeBy: 'controller-header-close',
            toggleBy: 'controller_header_settings_toggle'
        });

        this.mQuickSidebarOffcanvas.events.push({
            name: 'afterHide',
            handler: () => {
                if (this._pinned) {
                    this.mQuickSidebarOffcanvas.show();
                } else {
                    this.isOpen = false;
                }
            }
        }, {
            name: 'afterShow',
            handler: () => {
                this.isOpen = true;
            }
        });
    }
    set pinned(newValue: boolean) {
        if (newValue === this._pinned) {
            return;
        }
        this._pinned = newValue;
    }
    get pinned(): boolean {
        return this._pinned;
    }
    reversePinned(): void {
        this.pinned = !this.pinned;
    }
    set isOpen(newValue: boolean) {
        if (newValue === this._isOpen) {
            return;
        }
        this._isOpen = newValue;
    }
    get isOpen(): boolean {
        return this._isOpen;
    }


    switchHideEmpty(event) {
        //console.log(event.target.checked);
        this.hideEmpty = event.target.checked;
    }
    switchHideCompleted(event) {
        //  console.log(event.target.checked);
        this.hideCompleted = event.target.checked;
    }
    switchHidePickedUp(event) {
        // console.log(event.target.checked);
        this.hidePickedUp = event.target.checked;
    }

    getDataFilter(event?: LazyLoadEvent) {
        // console.log(this.hideEmpty);
        // console.log(this.hideCompleted);
        // console.log(this.hidePickedUp);
        // console.log(this.rowsToShow);
    }

    showFlyout(x: any, data: any): void {
        // var locationss = this.getParentComponent().locations;
        // console.log(x);
        let that = this;
        this.locations = x;
        // $("#locationSelectInput").val(x["0"].id);
        $('#locationSelectInput').on('change', function () {
            $("#locationSelectInput").val($(this).val());
            that.getParentComponent().filters.locationFilter = $("#locationSelectInput").val();
        });

        this.filters.locationFilter = x["0"].id;
        this.userProfile = data;
        // console.log(this.filterRouteData);   
    }

    filterRoutes() {
        let that = this;
        that.getParentComponent().filters.locationFilter = $("#locationSelectInput").val();
        that.getParentComponent().filters.startDate = $(".controllerDatePicker1").val();
        that.getParentComponent().filters.endDate = $(".controllerDatePicker1").val();
        localStorage.setItem('operatingLocationId', $("#locationSelectInput").val().toString());
        that.searchFilters.showCompletion = this.completed;
        this.getParentComponent().searchFilters.showCompletion = this.completed;
        this.getParentComponent().filterRoutes();
        this.locations.forEach(element => {
            if (element.id == $("#locationSelectInput").val()) {
                this.timezone = element.timeZone.value;
            }
        });



        this.userProfile.timezone = this.timezone;
        this.routeIds = [];
        this.routeSel = [];
        this.orderTypeIds = [];
        this.getRoutes();
    }
    generateRoutes() {
        this.getParentComponent().generateRoute();
    }

    selectAll() {
        this.routeIds = this.filterRouteData.map(x => x.routeId);
        this.routeSel = this.filterRouteData.map(x => x.routeId);
    }
    unselectAll() {
        this.routeIds = [];
        this.routeSel = [];
    }
    clearAll() {
        this.routeIds = [];
        this.routeSel = [];
    }
    addRoute(event) {
        this.routeIds.push(event.routeId);
        // console.log(this.routeIds)
    }
    removeRoute(event) {
        const index = this.routeIds.indexOf(event.value.routeId, 0);
        if (index > -1) {
            this.routeIds.splice(index, 1);
        }
        const index2 = this.routeSel.indexOf(event.value.routeId, 0);
        if (index2 > -1) {
            this.routeSel.splice(index2, 1);
        }
    }

    selectAllOrderType() {
        this.orderTypeIds = this.filteredOrderTypes.map(x => x.code);
        this.orderTypeSel = this.filteredOrderTypes.map(x => x.id);
    }
    unselectAllOrderType() {
        this.orderTypeIds = [];
        this.orderTypeSel = [];
    }
    clearAllOrderType() {
        this.orderTypeIds = [];
        this.orderTypeSel = [];
    }
    addOrderType(event) {
        this.orderTypeIds.push(event.code);
        // console.log(this.orderTypeIds)
    }
    removeOrderType(event) {
        const index = this.orderTypeIds.indexOf(event.value.code, 0);
        if (index > -1) {
            this.orderTypeIds.splice(index, 1);
        }
        const index2 = this.orderTypeSel.indexOf(event.value.code, 0);
        if (index2 > -1) {
            this.orderTypeSel.splice(index2, 1);
        }
    }


    filterOrderTypes() {
        this.spinnerService.show();
        this._orderTypesServiceProxy.getAll(undefined, undefined, undefined, 1, undefined,
            undefined, undefined, undefined).subscribe(result => {
                this.filteredOrderTypes = [];
                var arryHolder = {}
                for (var key in result.items) {
                    if (result.items[key].orderType.code != "CALLBACK") {
                        arryHolder = {
                            'id': result.items[key].orderType.id,
                            'description': result.items[key].orderType.description,
                            'code': result.items[key].orderType.code
                        }
                        this.filteredOrderTypes.push(arryHolder);
                    }
                    
                }
                this.spinnerService.hide();

            });
    }

    filterMobileVersion() {
        this.spinnerService.show();
        this._mobileAppVersionServiceProxy.getMobileVersions().subscribe(result => {
            this.filteredMobileVersion = result.items;
            this.spinnerService.hide();
        });
    }
    addedFilter() {
        this.getParentComponent().filters.orderType = $('#orderTypesSelectInput').val();
        this.getParentComponent().filters.osName = $('#mobileSelectInput').val();
        this.getParentComponent().searchFilters.showCompletion = this.completed;
        this.getParentComponent().filters.routeIds = this.routeIds;
        this.getParentComponent().filters.orderType = this.orderTypeIds;
        // this.getParentComponent().searchFilters.showCompletion = this.completed;
        // this.getParentComponent().searchFilters.routeIds = this.routeIds;
        // this.getParentComponent().searchFilters.orderType = this.orderTypeIds;
        // this.getParentComponent().searchFilters.deviceType = $('#mobileSelectInput').val();
        // localStorage.setItem('orderType', JSON.stringify(this.orderTypeIds));
        // localStorage.setItem('routeIds', JSON.stringify(this.routeIds));
        // localStorage.setItem('completed', JSON.stringify(this.completed));
        // localStorage.setItem('deviceType', JSON.stringify($('#mobileSelectInput').val().toString()));
        this.getParentComponent().filterRoutes();

    }
    activeDriver(){
        this.routeSel = [];
        this.routeIds = [];
        let tmp = [];
        this._locatorAppService.getActiveRoutes(moment.tz(localStorage.getItem('loadDate'), this.timeId),this.filters.locationFilter).subscribe(result => {
            result.items.forEach(item => {
                tmp.push(item.routeId);
                this.routeIds.push(item.routeId);
            });
            this.routeSel = tmp;
        });
        
    }

    getRoutes(){
        this._locatorAppService.getLaboratoryDriverFilter(moment.tz(localStorage.getItem('loadDate'), this.timeId),moment.tz(localStorage.getItem('loadDate'), this.timeId),this.filters.locationFilter,undefined,undefined,this.routeIds)
        .subscribe((result)=>{
            this.filterRouteData = result.items;
        });
    }

    getFilter()
    {

        if(localStorage.getItem('searchFilter') == null)
        {
            this.searchFilters.route = '';
            this.searchFilters.driverName = '';
            this.searchFilters.showCompletion = false;
            this.searchFilters.vehicleName = '';
            
        }
        else
        {
            this.searchFilters = JSON.parse(localStorage.getItem('searchFilter'));

        }
        localStorage.setItem('searchFilter', JSON.stringify(this.searchFilters));
        this.completed = this.searchFilters.showCompletion;
    }
}