import { Injector, Component, ViewChild, AfterViewInit, HostBinding, ElementRef, OnInit, Input, ViewContainerRef } from "@angular/core";
import { AppComponentBase } from "@shared/common/app-component-base";
import { Router } from "@angular/router";
import { TabsetComponent } from "ngx-bootstrap";
import * as moment from 'moment-timezone';
import { RouteAnalyzerServiceProxy, RouteCodeListInput, LocationServiceProxy } from '@shared/service-proxies/service-proxies';
import { XmlHttpRequestHelper } from '@shared/helpers/XmlHttpRequestHelper';
import { AppConsts } from '@shared/AppConsts';
import { AppSessionService } from "@shared/common/session/app-session.service";
import { MessageService } from 'primeng/api';

@Component({
    selector: 'pickupRouteAnalyzerFlyoutComponent',
    templateUrl: 'route-analyzer-flyout.component.html',
    // animations: [appModuleAnimation()],
    styleUrls: ['route-analyzer-flyout.component.less'],
    providers: [MessageService]
})

export class PickupRouteAnalyzerFlyoutComponent 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;
    constructor(

        injector: Injector,
        private el: ElementRef,
        private router: Router,
        private viewContainerRef: ViewContainerRef,
        private _routeAnalyzerService: RouteAnalyzerServiceProxy,
        private _locationServiceProxy: LocationServiceProxy
    ) {
        super(injector);


    }
    locationName:any;
    _isOpen: boolean;
    _pinned = false;
    flyoutDate: Date;
    locations: any;
    locationId: number;
    routeCodes: any;
    routeCode: any;
    dayInput: string;
    ngOnInit(): void {
        this._isOpen = true;
        $('.kt-select2').select2();
        this.flyoutDate = moment(Date.now()).toDate();
        if (localStorage.getItem('analyzerLocationId') != null && localStorage.getItem('analyzerLocationId') != "") {
            this.locationId = parseInt(localStorage.getItem('analyzerLocationId'));
        }

        if (localStorage.getItem('analyzerStartDate') != null) {
            this.flyoutDate = moment(localStorage.getItem('analyzerStartDate')).toDate();
        }

        if (localStorage.getItem('pickupAnalyzerDayFilter') == null) {
            this.dayInput = 'ALL';
        } else {
            this.dayInput = localStorage.getItem('pickupAnalyzerDayFilter');
        }
        
    }

    assignLocationModal(): void {
        this.getParentComponent().assignLocationModal();
    }

    deleteLocation(): void {
        this.locationId = null;
        this.locationName = '';
        this.routeCode = '';
        this.getParentComponent().deleteLocation();
        this.getParentComponent().deleteRoute();
    }

    selectLocation(): void {
        this.getParentComponent().selectLocation();
        this.getParentComponent().deleteRoute();
        this.routeCode = '';
        localStorage.removeItem('pickupAnalyzerRouteCode');
        $('#routeCodeInput').val("");
    }

    selectRouteModal(): void {
        this.getParentComponent().selectRouteModal();
    }

    deleteRoute(): void {
        this.routeCode = '';
        this.getParentComponent().deleteRoute();
    }

    getParentComponent() {
        return this.viewContainerRef['_data'].componentView.component.viewContainerRef['_view'].component
    }

    ngAfterViewInit(): void {
        $(".select2-container").css("width", "100%");
        $(".form-control").css("height", "38px");
        $(".input-group-append").css("display", "none");


        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;
            }
        });


        // change location
        let that = this;
        $("#locationSelectInput").on('change', function (e) {
            localStorage.setItem('analyzerLocationId', $("#locationSelectInput").val().toString());
            that.getRoutes();
        });
    }

    getRoutes() {
        this.spinnerService.show();
        var data = new RouteCodeListInput();
        this.locationId = parseInt(localStorage.getItem('analyzerLocationId'));
        data.locationId = this.locationId;
        if (localStorage.getItem('analyzerLocationId') != null && localStorage.getItem('analyzerLocationId') != "") {
            this._routeAnalyzerService.routeCodeList(data).subscribe(result => {

                this.routeCodes = result;
                this.spinnerService.hide();
            });
        } else {
            this.spinnerService.hide();
        }

    }

    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;
    }

    showFlyout(location: any): void {
        let that = this;
        this.getRoutes();
        this.locations = location;

        $('#dayInput').on('select2:select', function (e) {

            var data = e.params.data;
            that.dayInput = data.id;

        });

        if(localStorage.getItem('pickupAnalyzerLocationString') != null){
            this.locationName =  localStorage.getItem('pickupAnalyzerLocationString');
            $('#locationSelectInput').val(localStorage.getItem('pickupAnalyzerLocationString'));
        } else {
            this.locationName =  $('#locationSelectInput').val();
        }

        if(localStorage.getItem('pickupAnalyzerRouteCode') != null){
            this.routeCode =  localStorage.getItem('pickupAnalyzerRouteCode');
            $('#routeCodeInput').val(localStorage.getItem('pickupAnalyzerRouteCode'));
        } else {
            this.routeCode = $('#routeCodeInput').val();
        }
    }

    filterRouteAnalyzer() {

        // localStorage.removeItem('pickupAnalyzerStartDate');
        // localStorage.removeItem('pickupAnalyzerLocationId');
        // localStorage.removeItem('pickupAnalyzerRouteCode');
        localStorage.setItem('pickupAnalyzerStartDate', $('.analyzerDatePicker').val().toString());

        localStorage.setItem('pickupAnalyzerDayFilter', this.dayInput);

        // if ($("#locationSelectInput").val().toString() != "") {
        //     localStorage.setItem('pickupAnalyzerLocationId', $("#locationSelectInput").val().toString());
        // }

        // if ($("#routeCodeInput").val().toString() != "") {
        //     localStorage.setItem('pickupAnalyzerRouteCode', $("#routeCodeInput").val().toString());
        // }
        // var url = this.router.url;
        // var path = url.split("/")[3];
        // if( path != null || path != undefined){
        //     if(path == "route-analyzer-pickup"){
        //         this.getParentComponent().getOrdersByLocation();
        //     }

        //     if(path == "route-analyzer-delivery"){
        //         this.getParentComponent().getStopsByLocation();
        //     }
        // }
        if (this.dayInput == 'WEEKEND') {
            if (moment($('.analyzerDatePicker').val().toString(), "MM-DD-YYYY").day() == 0) {
                this.getParentComponent().getOrdersByLocation();
                this.mQuickSidebarOffcanvas.hide();

            } else if (moment($('.analyzerDatePicker').val().toString(), "MM-DD-YYYY").day() == 6) {
                this.getParentComponent().getOrdersByLocation();
                this.mQuickSidebarOffcanvas.hide();
            } else {
                this.message.info("", "Selected date is not on weekend");
            }
        } else if (this.dayInput == 'WEEKDAY') {
            if (moment($('.analyzerDatePicker').val().toString(), "MM-DD-YYYY").day() == 6) {
                this.message.info("", "Selected date is not a weekday");
            } else if (moment($('.analyzerDatePicker').val().toString(), "MM-DD-YYYY").day() == 0) {
                this.message.info("", "Selected date is not a weekday");
            } else {
                this.getParentComponent().getOrdersByLocation();
                this.mQuickSidebarOffcanvas.hide();
            }
        } else {
            this.getParentComponent().getOrdersByLocation();
            this.mQuickSidebarOffcanvas.hide();
        }

    }
    getOrdersByLocation() {
        this.getParentComponent().getOrdersByLocation();
    }

    getStopsByLocation() {
        this.getParentComponent().getStopsByLocation();
    }

}