import { Injector, Component, ViewChild, AfterViewInit, HostBinding, ElementRef, OnInit, Directive, HostListener, Input, Output, EventEmitter } 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 { FlyOutLocationModalComponent } from "./location/location-modal.component";
import { ModalDirective } from "ngx-bootstrap";

@Component({

    selector: 'flyOutComponent',
    templateUrl: 'flyout.component.html',
    animations: [appModuleAnimation()],
    styleUrls: ['./flyout.component.less'],

})

export class FlyOutComponent 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
    

    constructor(

        injector:Injector,
        private _localStorageService: LocalStorageService,
        private el: ElementRef,
        private router:Router,

    ){

        super(injector)
        
    }

    @Output() accountsModal = new EventEmitter<boolean>();
    @Output() locationModal = new EventEmitter<boolean>();
    @Output() packageTypeModal = new EventEmitter<boolean>();
    @Output() fleetModal = new EventEmitter<boolean>();
    @Output() driverModal = new EventEmitter<boolean>();
    @Output() contactsModal = new EventEmitter<boolean>();

    showAccountsModal(show: boolean){
        this.accountsModal.emit(show)
    }

    showLocationModal(show: boolean){
        this.locationModal.emit(show); 
    }

    showPackageTypeModal(show: boolean){
        this.packageTypeModal.emit(show);
    }

    showFleetModal(show: boolean){
        this.fleetModal.emit(show);
    }

    showDriverModal(show: boolean){
        this.driverModal.emit(show);
    }

    showContactsModal(show: boolean){
        this.contactsModal.emit(show);
    }

    iconChangesAccounts(): void{
        if(this.showAccountsIcon==false){
            this.showAccountsIcon=!this.showAccountsIcon
        }else{
            this.showAccountsIcon=true    
        }
    }

    iconChangesPackageType(): void{
        if(this.showPackageTypeIcon==false){
            this.showPackageTypeIcon=!this.showPackageTypeIcon
        }else{
            this.showPackageTypeIcon=true    
        }  
    }

    iconChangesLocation(): void{
        if(this.showLocationIcon==false){
            this.showLocationIcon=!this.showLocationIcon
        }else{
            this.showLocationIcon=true    
        }   
    }

    iconChangesFleet(): void{
        if(this.showFleetIcon==false){
            this.showFleetIcon=!this.showFleetIcon
        }else{
            this.showFleetIcon=true    
        } 
    }

    iconChangesDriver(): void{
        if(this.showDriverIcon==false){
            this.showDriverIcon=!this.showDriverIcon
        }else{
            this.showDriverIcon=true 
        }
        
    }
    iconChangesContacts(): void{
        if(this.showDriverIcon==false){
            this.showContactsIcon=!this.showContactsIcon
        }else{
            this.showContactsIcon=true 
        }
    }


    

    _isOpen: boolean;
    _pinned = 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;
    }
    unPin(): void{
        this._pinned=false
        this._isOpen=false
        
    }
    

    set isOpen(newValue: boolean) {
        if (newValue === this._isOpen) {
            return;
        }
        this._isOpen = newValue;
    }

    get isOpen(): boolean {
        return this._isOpen;
    }

    ngOnInit(): void{
        
    }
    
    ngAfterViewInit(): void{
        this.mQuickSidebarOffcanvas = new KTOffcanvas(this.el.nativeElement, {
            overlay: true,
            baseClass: 'kt-quick-panel',
            closeBy: 'getting_started_close',
            toggleBy: 'getting_started_toggle'
        });

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

    


}