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 { ModalDirective } from "ngx-bootstrap";
import { LazyLoadEvent } from "primeng/api";

@Component({

    selector: 'userPreferencesFlyoutComponent',
    templateUrl: 'user-preferences-flyout.component.html',
    animations: [appModuleAnimation()]

})

export class UserPreferencesFlyoutComponent 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;

    constructor(

        injector: Injector,
        private _localStorageService: LocalStorageService,
        private el: ElementRef,
        private router: Router,
    ) { super(injector) }

    _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: 'user_preferences_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
            }
        });
    }

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