/**
* @Component Name: FixedPluginComponent
* @Module: App
* @Module Functionality : To change the sidebar background/font
* @Creation Date: August 12,2017
* @Author: sbaireddy
* @Version: 1.0
*/
import { Component, OnInit, Input, Output, OnChanges, EventEmitter } from '@angular/core';

import { HEADER_BACKGROUND_DEFAULT, SIDEBAR_BACKGROUND_DEFAULT, SIDEBAR_ACTIVE_COLOR_DEFAULT, CONTENT_BACKGROUND_DEFAULT } from '../../shared/form.constants';

import { User } from '../../shared/modal/user';
import { UserService } from '../../services/user.service';
import { SharedService } from '../../shared/shared.service';

declare var $: any;

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

export class FixedPluginComponent implements OnInit, OnChanges {
    private COMPONENT_NAME: string = 'FixedPluginComponent';
    storeId: number;
    user: User;
    @Input() showSettings: boolean = false;
    @Output() changeStatus: EventEmitter<boolean> = new EventEmitter();

    noOfRows: number = 4;
    noOfColumns: number = 3;
    searchResultPerPage: number = 25;

    headerBackground: string = HEADER_BACKGROUND_DEFAULT;
    sidebarBackground:  string = SIDEBAR_BACKGROUND_DEFAULT;
    sidebarActiveColor: string = SIDEBAR_ACTIVE_COLOR_DEFAULT;
    contentBackground:  string = CONTENT_BACKGROUND_DEFAULT;
    constructor(public sharedService: SharedService, public userService: UserService) { }
    /**
     * This function is used to initialize the directive/component after Angular
     * first displays the data-bound properties.It is invoked only once when the
     * directive is instantiated
     * @returns void
     */
    ngOnInit(): void {
        const METHOD_NAME: string = 'ngOnInit()';
        const self = this;
        const $navbar = $('.navbar');
        const $sidebar = $('.sidebar');
        const $mainpanel = $('.main-panel')
        const $titlecmp = $('.title-cmp');
        const $off_canvas_sidebar = $('.off-canvas-sidebar');
        const $off_canvas_mainpanel = $('.off-canvas-main-panel');
        const $off_canvas_title_cmp = $('.off-canvas-title-cmp');
        const window_width = $(window).width();
        if (window_width > 767) {
            if ($('.fixed-plugin .dropdown').hasClass('show-dropdown')) {
                $('.fixed-plugin .dropdown').addClass('open');
            }
        }
        this.sharedService.storeId.subscribe((val: number) => {this.storeId = val; });
        this.user = this.userService.getUser();
        if (this.user && this.user.favorites) {
            if (this.user.favorites.headerBackground) {
                this.headerBackground = this.user.favorites.headerBackground;
            }
            if (this.user.favorites.sidebarBackground) {
                this.sidebarBackground = this.user.favorites.sidebarBackground;
            }
            if (this.user.favorites.sidebarActiveColor) {
                this.sidebarActiveColor = this.user.favorites.sidebarActiveColor;
            }
            if (this.user.favorites.contentBackground) {
                this.contentBackground = this.user.favorites.contentBackground;
            }
        }

        // [start] - init background
        if ($sidebar.length !== 0 ) {
            $sidebar.attr('data-background-color', this.sidebarBackground);
        }
        if ($off_canvas_sidebar.length !== 0) {
            $off_canvas_sidebar.attr('data-background-color', this.sidebarBackground);
        }
        if ($sidebar.length !== 0) {
            $sidebar.attr('data-active-color', this.sidebarActiveColor);
        }
        if ($off_canvas_sidebar.length !== 0) {
            $off_canvas_sidebar.attr('data-active-color', this.sidebarActiveColor);
        }
        if ($mainpanel.length !== 0) {
            $mainpanel.attr('data-background-color', this.contentBackground);
        }
        if ($titlecmp.length !== 0) {
            $titlecmp.attr('data-background-color', this.contentBackground);
        }
        if ($off_canvas_mainpanel.length !== 0) {
            $off_canvas_mainpanel.attr('data-background-color', this.contentBackground);
        }
        if ($off_canvas_title_cmp.length !== 0) {
            $off_canvas_title_cmp.attr('data-background-color', this.contentBackground);
        }
        if ($navbar.length !== 0) {
            $navbar.attr('header-background-color', this.headerBackground);
        }
        // [end] - init background

        $('.fixed-plugin a').click(function (event) {
            // Alex if we click on switch, stop propagation of the event, so the dropdown will not be hide, otherwise we set the  section active
            if ($(this).hasClass('switch-trigger')) {
                if (event.stopPropagation) {
                    event.stopPropagation();
                } else if (window.event) {
                    window.event.cancelBubble = true;
                }
            }
            $('.dropdown-header.address').removeClass('open');
            if ($('.dropdown-header.settings').hasClass('open')) {
                $('.dropdown-header.settings').removeClass('open');
            } else {
                $('.dropdown-header.settings').addClass('open');
            }
        });

        $('.fixed-plugin .background-color span').click(function () {
            $(this).siblings().removeClass('active');
            $(this).addClass('active');
            const new_color = $(this).data('color');
            if (self.user && self.user.favorites) {
                self.user.favorites.sidebarBackground = new_color;
                self.userService.setUser(self.user);
                self.updateLokkAndFeel({sidebarBackground: new_color});
            }
            if ($sidebar.length !== 0) {
                $sidebar.attr('data-background-color', new_color);
            }
            if ($off_canvas_sidebar.length !== 0) {
                $off_canvas_sidebar.attr('data-background-color', new_color);
            }
        });

        $('.fixed-plugin .active-color span').click(function () {
            $(this).siblings().removeClass('active');
            $(this).addClass('active');
            const new_color = $(this).data('color');
            if (self.user && self.user.favorites) {
                self.user.favorites.sidebarActiveColor = new_color;
                self.userService.setUser(self.user);
                self.updateLokkAndFeel({sidebarActiveColor: new_color});
            }
            if ($sidebar.length !== 0) {
                $sidebar.attr('data-active-color', new_color);
            }
            if ($off_canvas_sidebar.length !== 0) {
                $off_canvas_sidebar.attr('data-active-color', new_color);
            }
        });


        $('.fixed-plugin .content-color span').click(function () {
            $(this).siblings().removeClass('active');
            $(this).addClass('active');
            const new_color = $(this).data('color');
            if (self.user && self.user.favorites) {
                self.user.favorites.contentBackground = new_color;
                self.userService.setUser(self.user);
                self.updateLokkAndFeel({contentBackground: new_color});
            }
            if ($mainpanel.length !== 0) {
                $mainpanel.attr('data-background-color', new_color);
            }
            if ($titlecmp.length !== 0) {
                $titlecmp.attr('data-background-color', new_color);
            }
            if ($off_canvas_mainpanel.length !== 0) {
                $off_canvas_mainpanel.attr('data-background-color', new_color);
            }
            if ($off_canvas_title_cmp.length !== 0) {
                $off_canvas_title_cmp.attr('data-background-color', new_color);
            }
        });

        $('.fixed-plugin .header-color span').click(function () {
            $(this).siblings().removeClass('active');
            $(this).addClass('active');
            const new_color = $(this).data('color');
            if (self.user && self.user.favorites) {
                self.user.favorites.headerBackground = new_color;
                self.userService.setUser(self.user);
                self.updateLokkAndFeel({headerBackground: new_color});
            }
            if ($navbar.length !== 0) {
                $navbar.attr('header-background-color', new_color);
            }
        });
    }

     /**
    * This function is used to updates the look and feel for logged in user
    * @return {void}
    */
    updateLokkAndFeel(inputData: any): void {
        const METHOD_NAME: string = 'updateLokkAndFeel()';
        if (this.user && this.user.permissions) {
            inputData.roleType = 'AGT';
            if (this.user.permissions.isWTS) {
                inputData.roleType = 'WTS'
            } else if (this.user.permissions.isSupervisor) {
                inputData.roleType = 'SUP'
            } else if (this.user.permissions.isManager) { inputData.roleType = 'MGR' };
        }
        // this.sharedService.showSpinner(true); // spinner
        this.userService.updateProfile(this.storeId, this.user.userId, inputData).subscribe(result => {
            // this.sharedService.showSpinner(false); // spinner
            console.log('Agent profile got updated.');
        }, error => {
            // this.sharedService.showSpinner(false); // spinner
            // this.sharedService.showErrorMessage(error, true);
            console.error('error=>' + error);
        });
    }

    /**
    * This function is called whenever one or more data-bound input properties change
    * @returns void
    */
    ngOnChanges() {
        const METHOD_NAME: string = 'ngOnChanges()';
        if (this.showSettings === false) {
            setTimeout(() => {
                this.changeStatus.emit(true);
            }, 500)
        }
    }

    decreseRows():void{
        if(this.noOfRows > 2 ) this.noOfRows --;
        else this.noOfRows = 2;
    }
    increseRows():void{
        if(this.noOfRows < 10 ) this.noOfRows ++;
        else this.noOfRows = 10;
    }
    decreseColumns():void{
        if(this.noOfColumns > 2 ) this.noOfColumns --;
        else this.noOfColumns = 2;
    }
    increseColumns():void{
        if(this.noOfColumns < 10 ) this.noOfColumns ++;
        else this.noOfColumns = 10;
    }
    decreseSearchResult():void{
        if(this.searchResultPerPage > 5 ) this.searchResultPerPage -= 5;
        else this.searchResultPerPage = 5;
    }
    increseSearchResult():void{
        if(this.searchResultPerPage < 100 ) this.searchResultPerPage += 5;
        else this.searchResultPerPage = 100;
    }
    
    resetSettings(): void{

    }
}