import { Injector, Component, AfterViewInit, HostBinding, ElementRef, ViewChild, ViewContainerRef } from "@angular/core";
import { AppComponentBase } from "@shared/common/app-component-base";
import { appModuleAnimation } from "@shared/animations/routerTransition";
import { Options } from "select2";
import { LocationServiceProxy, LocatorServiceProxy } from "@shared/service-proxies/service-proxies";
import { TabsetComponent } from "ngx-bootstrap";

@Component({

    selector: 'routeBuilderFilter',
    templateUrl: 'route-builder-filter.component.html',
    animations: [appModuleAnimation()],
    styleUrls: ['route-builder-filter.component.less'],

})

export class RouteBuilderFilter extends AppComponentBase implements AfterViewInit{

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

    @HostBinding('style.overflow') styleOverflow: any = 'hidden';
    
    @ViewChild('locatorTab', { static: false }) staticTabs: TabsetComponent;

    mQuickSidebarOffcanvas: any;

    constructor(
        injector:Injector,
        private el: ElementRef,
        private _locatorAppService: LocatorServiceProxy,
        private _locationServiceProxy: LocationServiceProxy,
        private viewContainerRef: ViewContainerRef,
    ){
        super(injector)  
    }

    locations: any;
    locationFilter: any;
    dateFilter: any;
    options: Options ;
    _isOpen: boolean;
    _pinned = false;
    data = [];
    data1: any = [];
    filterSearch:string;
    
     
    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;
    }

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

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

        this.mQuickSidebarOffcanvas.events.push({
            name: 'afterHide',
            handler: () => {
                if (this._pinned) {
                    this.mQuickSidebarOffcanvas.show();
                } else {
                    this.isOpen = false;
                }
            }
        }, {
                name: 'afterShow',
                handler: () => {
                    this.isOpen = true;
                }
            });
    }

    
    loadFlyOut(): void{
        
    }

    applyFilter(event){
        let filterValueLower = event.target.value;
        if(filterValueLower === '' || filterValueLower === undefined ) {
            this.data = this.data1;
        } 
        else 
        {
          this.data = this.data1.filter((d) => d.searchTerm.includes(filterValueLower))
        }
    }
    
    getLocationsOnLoad()
    {
        let that = this;
        return new Promise(function(resolve, reject){
            that._locationServiceProxy.getLocationNames(undefined, undefined, undefined, undefined, undefined, undefined)
            .subscribe(result => {
                $('#locationSelectInputMap').select2();
                that.locations = result;
            });
        });
    }

    
    loadData(): void{     
        this.getOption(undefined);
        this.staticTabs.tabs[1].disabled = false;
        this.staticTabs.tabs[1].active = true  
    }

    getOption(orderId){
        let x = 0;
        this._locatorAppService.getDriverFilter(
            this.dateFilter,
            this.dateFilter,
            this.locationFilter,
            undefined,
            undefined,
            undefined,
            false,
            undefined,
            undefined)
        .subscribe(result=>{
            
            this.data = this.data1 = result.items;
            this.data = result.items;
            this.filterSearch = '';
        });
    }

    show(id){
        this.getParentComponent().routeId = id;
        this.getParentComponent().getDetails();
    }

}