/**
* @Component Name: SidebarComponent
* @Module: Home
* @Module Functionality : To display the side bar information
* @Creation Date: August 12,2017
* @Author: sbaireddy
* @Version: 1.0
*/
import { Component, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
import { SIDEBAR_ROUTES, STORES, STORES_SHORT } from '../../shared/form.constants';

import { Router, ActivatedRoute } from '@angular/router';
import { OktaAuthService } from '@okta/okta-angular';
import { environment } from './../../../environments/environment';

import * as Constants from '../../shared/constants';
import { Logon, User, IPermission, ISalesStats } from '../../shared/modal/user';
import CartUtils from '../../shared/cart.utils';
import { IPackage, INotification, IChannel } from '../../shared/modal/common';
import { Cart } from '../../shared/modal/cart';
import { SharedService } from '../../shared/shared.service';
import { UserService } from '../../services/user.service';
import { CartService } from '../../services/cart.service';

declare var $: any;

@Component({
    moduleId: module.id,
    selector: 'sidebar-cmp',
    templateUrl: 'sidebar.component.html',
    styleUrls: ['./sidebar.component.css']
})

export class SidebarComponent implements OnInit, OnDestroy {
    private COMPONENT_NAME: string = 'SidebarComponent';
    karmaTestResult: any = {};

    public menuItems: any[];
    user: User;
    // toggle variable for dropdown
    showFullSidebar: boolean = true;
    showFeatureMenu: boolean = false;
    notificatiosDropDown: boolean = false;
    profileDropDown: boolean = false;
    showSalesStats: boolean = false;
    showChannels: boolean = false;
    cart: Cart;
    subscription: any;
    storeItems: any[];
    todayDate = new Date();
    unReadNotificationCount: number;
    storeId: number; // updating storeid
    rtStoreId: number = Constants.STORE_ID_RT;
    @Output() onTitleAction: EventEmitter<string> = new EventEmitter<string>();
    @Output() scrollToTop = new EventEmitter();
    showMinicart: boolean = false;
    storeName: string;
    disabledLink = false;

    constructor(public router: Router,
        public oktaAuth: OktaAuthService,
        public sharedService: SharedService,
        public cartService: CartService,
        public userService: UserService) {
    }

    ngOnInit() {
        const METHOD_NAME: string = 'ngOnInit()';
        this.menuItems = SIDEBAR_ROUTES.filter(menuItem => menuItem);
        this.sharedService.showSidebarStatus.subscribe((val: boolean) => {
            this.showFullSidebar = val;
        });
        // subscribing to get updated store Id.
        this.sharedService.storeId.subscribe((val: number) => {
            this.storeId = val;
            this.updateStoreName();
        });
        this.sharedService.showMincartStatus.subscribe((val: boolean) => {
            this.showMinicart = val;
        });
        this.cart = this.cartService.getCart();
        this.subscription = this.cartService.hasUpdate.subscribe((item) => {
            if (item) {
                this.cart = this.cartService.getCart();
                this.updateActivePackage();
            }
        });
        this.updateActivePackage();
        // getting the user information.
        this.user = this.userService.getUser();
        if (!this.user) {
            this.user = new User('tomuat66', null, null, null, null, null, null, null);
        } else {
            if (!this.user.notifications) {
                this.getNotifications(this.storeId, this.user.userId);
            }
        }
    }

    ngOnDestroy(): void {
        const METHOD_NAME: string = 'ngOnDestroy()';
        this.showFeatureMenu = false;
        this.notificatiosDropDown = false;
        this.profileDropDown = false;
        this.showSalesStats = false;
        this.showChannels = false;
        this.user = null;
        this.cart = null;
        this.karmaTestResult = null;
        this.menuItems = null;
        this.storeItems = null;
        this.subscription.unsubscribe();
    }

    updateActivePackage() {
        const METHOD_NAME: string = 'updateActivePackage()';
        this.showFeatureMenu = false;
        if (this.cart && CartUtils.getCurrentPackage(this.cart)) {
            const packagee: IPackage = CartUtils.getCurrentPackage(this.cart);
            if (packagee && packagee.plan && packagee.device) {
                this.showFeatureMenu = true;
            }
        }
    }

    onChangeShowFullSidebar(): void {
        const METHOD_NAME: string = 'onChangeShowFullSidebar()';
        this.sharedService.showSidebar(this.showFullSidebar = !this.showFullSidebar);
        this.updateStoreName(); // updating the store name for visible to agent
    }

    // Checking the window size and returning values on window resize.
    onResize(event) {
        const METHOD_NAME: string = 'onResize()';
        this.isNotMobileMenu();
    }

    isNotMobileMenu() {
        const METHOD_NAME: string = 'isNotMobileMenu()';
        if ($(window).width() > 768) {
            // if ($(window).width() > 768 && $(window).width() < 992) {
            //     this.sharedService.showSidebar(false);
            //     this.showFullSidebar = false;
            //     return false;
            // }else {
            return false;
            // }
        } else {
            this.sharedService.showSidebar(true);
            this.showFullSidebar = true;
            return true;
        }
    }

    // [start] getting notifications.
    getNotifications(storeId: number, userId: number) {
        const METHOD_NAME: string = 'getNotifications()';
        console.log('sidebarComponent.notifications()>>Start.');
        // this.errorMessage = "";
        this.sharedService.showSpinner(true);
        this.userService.getNotifications(storeId, userId).subscribe(
            data => {
                this.karmaTestResult = data;
                this.sharedService.showSpinner(false);
                console.log('sidebarComponent.notifications()>>Success.');
                this.user.notifications = <INotification[]>data;
                this.userService.setUser(this.user);
                this.unReadNotificationCount = 0;
                for (let i = 0; i < this.user.notifications.length; i++) {
                    this.user.notifications[i].isCollapsed = true;
                    if (!this.user.notifications[i].isRead) { this.unReadNotificationCount++ };
                }
                console.log('sidebarComponent.notifications()>>Unread count:' + this.unReadNotificationCount);
            },
            error => {
                console.log('Server error.');
                // this.sharedService.showErrorMessage(error, null);
                this.sharedService.showSpinner(false);
            });
        console.log('sidebarComponent.notifications()>>End.');
    }
    // [End] getting notifications.
    // Opens the modal popup with its name as parameter.
    triggerModal(modalName) {
        const METHOD_NAME: string = 'triggerModal()';
        this.onTitleAction.emit(modalName);
    }

    // Start -For hiding the sidebar onclick of any item
    sidebarToggle() {
        const METHOD_NAME: string = 'sidebarToggle()';
        const body = document.getElementsByTagName('body')[0];
        body.classList.remove('nav-open');
        const toggleButton = document.getElementsByClassName('navbar-toggle toggled')[0];
        if (toggleButton && toggleButton.classList) {
            toggleButton.classList.remove('toggled');
        }
    }
    // End -For hiding the sidebar onclick of any item

    // Start -For showing Notifications Dropdown
    openNotificationsDropdown() {
        const METHOD_NAME: string = 'openNotificationsDropdown()';
        event.stopPropagation();
        $('#notifications-dropdown')[0].classList.toggle('open');
        if ($('#userinfo-dropdown')[0].classList.contains('open')) {
            $('#userinfo-dropdown')[0].classList.remove('open')
        }
    }
    // End - For showing Notifications Dropdown


    // Start -For showing Userinfo Dropdown
    openUserInfoDropdown() {
        const METHOD_NAME: string = 'openUserInfoDropdown()';
        event.stopPropagation();
        $('#userinfo-dropdown')[0].classList.toggle('open');
        if ($('#notifications-dropdown')[0].classList.contains('open')) {
            $('#notifications-dropdown')[0].classList.remove('open')
        }
    }
    // End - For showing Userinfo Dropdown

    // [start] - used to logout of the application.
    logout() {
        const METHOD_NAME: string = 'logout()';
        console.log('sidebarComponent.notifications()>>Start.');
        // this.errorMessage = "";
        this.sharedService.showSpinner(true);
        this.userService.logout(this.storeId, this.user.userId).subscribe(
            data => {
                this.karmaTestResult = data;
                this.sharedService.showSpinner(false);
                this.userService.setUser(null);
                console.log('sidebarComponent.logout()>>Success.');
                this.router.navigate(['login']);
                console.log('sidebarComponent.notifications()>>Unread count:' + this.unReadNotificationCount);
            },
            error => {
                console.log('Server error.');
                // this.errorMessage = 'Server error';
                this.sharedService.showSpinner(false);
                this.userService.setUser(null);
                this.router.navigate(['login']);
            });
    }
    // [End] - used to logout of the application.

    // [start] switches from one channel to another.
    swithChannel(storeId: number): void {
        const METHOD_NAME: string = 'swithChannel()';
        console.log('sidebarComponent.swithChannel()>>Start.');
        if (this.cartService.getCart()) {
            this.sharedService.showErrorMessage('_ERR_CART_IN_PROGRESS', false);
        } else {
            this.sharedService.updateStoreId(storeId);
            this.router.navigate(['home/search']);
        }
        console.log('sidebarComponent.swithChannel()>>End.');
    }
    // [End] switches from one channel to another.

    // [start] To expand notifications.
    expandNotification(event: any, item: INotification): void {
        const METHOD_NAME: string = 'expandNotification()';
        console.log('sidebarComponent.expandNotification()>>Start.');
        event.stopPropagation();
        item.isCollapsed = !item.isCollapsed;
        console.log('sidebarComponent.expandNotification()>>End.');
        this.updateNotification(item); // Calling update notification
    }
    // [End] getting notifications.

    // [start] Updating notifications.
    updateNotification(item: INotification): void {
        const METHOD_NAME: string = 'updateNotification()';
        console.log('sidebarComponent.updateNotification()>>Start.');
        if (!item.isRead) {// Start- Calling update notification API
            const requestParams: any = { 'ids': [item.id] };
            this.userService.updateNotifications(this.storeId, this.user.userId, requestParams).subscribe(data => {
                this.karmaTestResult = data;
                console.log(data);
            })
            console.log('sidebarComponent.updateNotification()>>End.');
        } // End- Calling update notification API
    }
    // [End] Updating notifications.
    callScrollTop() {
        const METHOD_NAME: string = 'callScrollTop()';
        this.scrollToTop.emit();
    }

    canShowMenuItem(menuPath: string): boolean {
        const METHOD_NAME: string = 'canShowMenuItem()';
        if (this.cart) {
            if (this.cart.isShopifyOrder) {
                if (menuPath !== '/home/search') {
                    return false;
                }
            } else if (this.cart.refType && this.cart.refType === Constants.REF_TYPE_EXCHANGE) {
                if (menuPath === '/home/gsm-rateplans' || menuPath === '/home/mi-rateplans') {
                    return false;
                } else {
                    let showMenuItem: boolean = false;
                    if (menuPath === '/home/gsm-devices') {
                        if (this.cart.packages) {
                            for (const item of this.cart.packages) {
                                if (item.packageType === Constants.PACKAGE_TYPE_VOICE) {
                                    showMenuItem = true;
                                }
                            }
                            return showMenuItem;
                        }
                    } else if (menuPath === '/home/mi-devices') {
                        if (this.cart.packages) {
                            for (const item of this.cart.packages) {
                                if (item.packageType === Constants.PACKAGE_TYPE_DATA) {
                                    showMenuItem = true;
                                }
                            }
                            return showMenuItem;
                        }
                    } else if (menuPath === '/home/accessories') {
                        if (this.cart.packages) {
                            for (const item of this.cart.packages) {
                                if (item.packageType === Constants.PACKAGE_TYPE_ACCESSORY) {
                                    showMenuItem = true;
                                }
                            }
                            return showMenuItem;
                        }
                    }
                }
            }
        }
        return true;
    }

    displayMinicart(): void {
        const METHOD_NAME: string = 'displayMinicart()';
        this.sharedService.showMinicart(this.showMinicart = !this.showMinicart);
    }

    updateStoreName(): void {
        const METHOD_NAME: string = 'updateStoreName()';
        if (this.storeId) {
            if (this.showFullSidebar) {
                const storeArr: any = STORES.filter((item) => {
                    return item.key === this.storeId.toString();
                });
                if (storeArr && storeArr.length > 0) {
                    this.storeName = storeArr[0].value;
                }
            } else {
                const storeArr: any = STORES_SHORT.filter((item) => {
                    return item.key === this.storeId.toString();
                });
                if (storeArr && storeArr.length > 0) {
                    this.storeName = storeArr[0].value;
                }
            }
        }
    }

    async redirectLoginPage(): Promise<any> {
        if (environment.oktaEnable) {
            await this.oktaAuth.logout();
            this.oktaAuth.loginRedirect('/login')
        } else {
            this.router.navigate(['login']);
        }
    }
}