import {Component, OnInit} from '@angular/core';
import {MenuService} from './app.menu.service';
import {PrimeNGConfig} from 'primeng/api';
import {AppComponent} from './app.component';
import { AuthService } from './_services/auth/auth.service';
import { ApiService } from './app.api.service';


@Component({
    selector: 'app-main',
    templateUrl: './app.main.component.html',
    styleUrls: ['./app.component.css']
})
export class AppMainComponent {

    rotateMenuButton: boolean;

    topbarMenuActive: boolean;

    overlayMenuActive: boolean;

    staticMenuDesktopInactive: boolean;

    staticMenuMobileActive: boolean;

    menuClick: boolean;

    topbarItemClick: boolean;

    configClick: boolean;

    activeTopbarItem: any;

    menuHoverActive: boolean;

    configActive: boolean;

    inlineMenuActive: boolean;

    inlineMenuClick: boolean;

    constructor(private menuService: MenuService,
        private primengConfig: PrimeNGConfig,
        public apiService: ApiService,
        public app: AppComponent, public authService: AuthService) {

        if (performance.navigation.type == performance.navigation.TYPE_RELOAD) {
        } else {
            this.authService.logout();
        }
    }

    public payrollTypesImg = [
        { id: 1, imagePath: 'assets/payrolltype-img/payrolltype1.png' },
        { id: 2, imagePath: 'assets/payrolltype-img/payrolltype2.png' },
        { id: 3, imagePath: 'assets/payrolltype-img/payrolltype3.png' },
        { id: 4, imagePath: 'assets/payrolltype-img/payrolltype4.png' },
        { id: 5, imagePath: 'assets/payrolltype-img/payrolltype5.png' }
    ];
    public getImagePath(): string {
        const a = ApiService.USERTYPE;
        const typeImage = this.payrollTypesImg.find(img => img.id === ApiService.PAYROLLTYPEID);
        return typeImage ? typeImage.imagePath : 'assets/layout/images/Logo.png';
    }

    onLayoutClick() {
        if (!this.topbarItemClick) {
            this.activeTopbarItem = null;
            this.topbarMenuActive = false;
        }

        if (!this.menuClick || (this.inlineMenuClick && this.isSlim())) {
            if (this.isHorizontal() || this.isSlim()) {
                this.menuService.reset();
            }

            if (this.overlayMenuActive || this.staticMenuMobileActive) {
                this.hideOverlayMenu();
            }

            this.menuHoverActive = false;
        }

        if (this.configActive && !this.configClick) {
            this.configActive = false;
        }

        if (this.inlineMenuActive && !this.inlineMenuClick && !this.isStatic()) {
            this.inlineMenuActive = false;
        }

        this.inlineMenuClick = false;
        this.configClick = false;
        this.topbarItemClick = false;
        this.menuClick = false;
    }

    onMenuButtonClick(event) {
        // debugger;
        this.menuClick = true;
        this.rotateMenuButton = !this.rotateMenuButton;
        this.topbarMenuActive = false;

        if (this.app.layoutMode === 'overlay' && (!this.isMobile() && !this.isTablet())) {
            this.overlayMenuActive = !this.overlayMenuActive;
        } else {
            if (this.isDesktop()) {
                this.staticMenuDesktopInactive = !this.staticMenuDesktopInactive;
            } else {
                this.staticMenuMobileActive = !this.staticMenuMobileActive;
            }
        }

        event.preventDefault();
    }

    onMenuClick($event) {
        this.menuClick = true;

        if (this.inlineMenuActive && !this.inlineMenuClick && !this.isStatic()) {
            this.inlineMenuActive = false;
        }
    }

    onInlineMenuClick(event) {
        this.inlineMenuActive = !this.inlineMenuActive;
        this.inlineMenuClick = true;
    }

    onTopbarMenuButtonClick(event) {
        debugger;
        this.topbarItemClick = true;
        this.topbarMenuActive = !this.topbarMenuActive;

        this.hideOverlayMenu();

        event.preventDefault();
    }

    onTopbarItemClick(event, item) {
        this.topbarItemClick = true;

        if (this.activeTopbarItem === item) {
            this.activeTopbarItem = null;
        } else {
            this.activeTopbarItem = item;
            localStorage.setItem('selectedMenu', JSON.stringify(this.menuService.clickedMenuItem));
        }

        event.preventDefault();
    }

    onTopbarSubItemClick(event) {
        event.preventDefault();
    }

    onConfigClick(event) {
        this.configClick = true;
    }

    onRippleChange(event) {
        this.app.ripple = event.checked;
        this.primengConfig = event.checked;
    }

    hideOverlayMenu() {
        this.rotateMenuButton = false;
        this.overlayMenuActive = false;
        this.staticMenuMobileActive = false;
    }

    isTablet() {
        const width = window.innerWidth;
        return width <= 1024 && width > 640;
    }

    isDesktop() {
        return window.innerWidth > 1024;
    }

    isMobile() {
        return window.innerWidth <= 640;
    }

    isOverlay() {
        return this.app.layoutMode === 'overlay';
    }

    isHorizontal() {
        return this.app.layoutMode === 'horizontal';
    }

    isSlim() {
        return this.app.layoutMode === 'slim';
    }

    isStatic() {
        return this.app.layoutMode === 'static';
    }

    isLoginForm(): boolean {
        const token = localStorage.getItem('token');
        if (token != null) {
            return false;
        }
        else {
            const forgot = localStorage.getItem('forgotpass');
            if (forgot != null) {
                return false;
            }
            else return true;

        }
    }
    forgotpassword(): boolean {
        const token = localStorage.getItem('token');
        if (token != null) {
            return false;
        }
        else {
            const forgot = localStorage.getItem('forgotpass');
            if (forgot != null) {
                return true;
            }
            else return false;

        }
    }

}