/**
* @Component Name: FavoritesComponent
* @Module: App
* @Module Functionality : To change the favorites
* @Creation Date: June 12, 2018
* @Author: sbaireddy
* @Version: 1.0
*/
import { Component, OnInit, Input, Output, OnDestroy, EventEmitter } from '@angular/core';

import * as Constants from '../constants';

import { User } from '../../shared/modal/user';
import { UserService } from '../../services/user.service';
import { SharedService } from '../../shared/shared.service';
import { CatalogService } from '../../services/catalog.service';
import { IDevice, IAccessory } from '../modal/common';

declare var $: any;

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

export class FavoritesComponent implements OnInit, OnDestroy {
    private COMPONENT_NAME: string = 'FavoritesComponent';
    visible: boolean = false;
    visibleAnimate: boolean = false;
    errorMessage: string = null;
    storeId: number = 10553;
    user: User;
    favoriteModel: any = {
        cardsPerRow: 3,
        rowsPerPage: 4,
        cardsPerPage: 12,
        ordersPerPage: 20,
        productType: 'gsm-devices',
        remProducts: null,
        selProducts: null
    };
    cardsPerRow: number = null;
    cardsPerPage: number = null;
    ordersPerPage: number = null;
    favoriteDevicesGsm: string = null;
    favoriteDevicesData: string = null;
    favoriteAccessories: string = null;

    gsmDevices: IDevice[];
    gsmDevicesSel: any;
    gsmDevicesRem: any;

    miDevices: IDevice[];
    miDevicesSel: any;
    miDevicesRem: any;

    accessories: IAccessory[];
    accessoriesSel: any;
    accessoriesRem: any;

    constructor(
        public sharedService: SharedService,
        public userService: UserService,
        public catalogService: CatalogService) { }

    /**
     * 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()';
        this.sharedService.storeId.subscribe((val: number) => {
            this.storeId = val;
        });
    }

    /**
     * This function is used to initialize the directive/omponent after Angular
     * first displays the data-bound properties.It is invoked only once when the
     * directive is instantiated
     * @returns void
     */
    ngOnInit1(): void {
        const METHOD_NAME: string = 'ngOnInit()';
        this.user = this.userService.getUser();
        if (this.user && this.user.favorites) {
            if (this.user.favorites.cardsPerRow) {
                this.cardsPerRow = this.user.favorites.cardsPerRow;
                this.favoriteModel.cardsPerRow = this.user.favorites.cardsPerRow;
            } else {
                this.favoriteModel.cardsPerRow = Constants.CARDS_PER_ROW;
            }
            if (this.user.favorites.cardsPerPage) {
                this.cardsPerPage = this.user.favorites.cardsPerPage;
                this.favoriteModel.cardsPerPage = this.user.favorites.cardsPerPage;
            } else {
                this.favoriteModel.cardsPerPage = Constants.CARDS_PER_PAGE;
            }
            this.favoriteModel.rowsPerPage = this.favoriteModel.cardsPerPage / this.favoriteModel.cardsPerRow;
            if (this.user.favorites.ordersPerPage) {
                this.ordersPerPage = this.user.favorites.ordersPerPage;
                this.favoriteModel.ordersPerPage = this.user.favorites.ordersPerPage;
            } else {
                this.favoriteModel.ordersPerPage = Constants.ORDERS_PER_PAGE;
            }
            if (this.user.favorites.favoriteDevicesGsm) {
                this.gsmDevicesSel = new Array();
                this.favoriteDevicesGsm = this.user.favorites.favoriteDevicesGsm;
            }
            if (this.user.favorites.favoriteDevicesData) {
                this.miDevicesSel = new Array();
                this.favoriteDevicesData = this.user.favorites.favoriteDevicesData;
            }
            if (this.user.favorites.favoriteAccessories) {
                this.accessoriesSel = new Array();
                this.favoriteAccessories = this.user.favorites.favoriteAccessories;
            }
        }
        this.gsmDevices = this.catalogService.getGSMDevices();
        if (this.gsmDevices != null && this.gsmDevices.length > 0) {
            this.gsmDevicesRem = new Array();
            this.updateProducts(this.gsmDevices, this.favoriteDevicesGsm, this.gsmDevicesSel, this.gsmDevicesRem);
        }
        this.miDevices = this.catalogService.getMIDevices();
        if (this.miDevices != null && this.miDevices.length > 0) {
            this.miDevicesRem = new Array();
            this.updateProducts(this.miDevices, this.favoriteDevicesData, this.miDevicesSel, this.miDevicesRem);
        }
        this.accessories = this.catalogService.getAccessories();
        if (this.accessories != null && this.accessories.length > 0) {
            this.accessoriesRem = new Array();
            this.updateProducts(this.accessories, this.favoriteAccessories, this.accessoriesSel, this.accessoriesRem);
        }
    }

    /**
    * Cleanup just before Angular destroys the directive/component.
    * Unsubscribe Observables and detach event handlers to avoid memory leaks.
    * @returns void
    */
   ngOnDestroy(): void {
        const METHOD_NAME: string = 'ngOnDestroy()';
   }

    /**
    * Cleanup just before Angular destroys the directive/component.
    * Unsubscribe Observables and detach event handlers to avoid memory leaks.
    * @returns void
    */
   ngOnDestroy1(): void {
        const METHOD_NAME: string = 'ngOnDestroy()';
        this.cardsPerRow = null;
        this.cardsPerPage = null;
        this.ordersPerPage = null;
        this.favoriteDevicesGsm = null;
        this.favoriteDevicesData = null;
        this.favoriteAccessories = null;

        this.gsmDevices = null;
        this.gsmDevicesSel = null;
        this.gsmDevicesRem = null;

        this.miDevices = null;
        this.miDevicesSel = null;
        this.miDevicesRem = null;

        this.accessories = null;
        this.accessoriesSel = null;
        this.accessoriesRem = null;
    }

    /**
     * This function is used to display the  object.
     * @returns void
     */
    public show(): void {
        const METHOD_NAME: string = 'show()';
        this.visible = true;
        this.ngOnInit1();
        setTimeout(() => this.visibleAnimate = true, 100);
    }

    /**
     * This function is used to hide the object.
     * @returns void
     */
    public hide(): void {
        const METHOD_NAME: string = 'hide()';
        this.visibleAnimate = false;
        this.ngOnDestroy1();
        setTimeout(() => this.visible = false, 300);
    }

    /**
     * This function is used to hide the object when nouse event performed
     * @param  {MouseEvent} event - contains valid mouse event
     * @returns void
     */
    public onContainerClicked(event: MouseEvent): void {
        const METHOD_NAME: string = 'onContainerClicked()';
        if ((<HTMLElement>event.target).classList.contains('modal')) {
            this.hide();
        }
    }

    updateProducts(products: any, productIds: string, selProducts: any, remProducts: any): void {
        if (products != null && products.length > 0) {
            for (let product of products) {
                if (productIds != null && productIds.includes(product.productId.toString())) {
                    selProducts.push( {key: product.productId, value: product.manufacturer + ' ' + product.name});
                } else {
                    remProducts.push( {key: product.productId, value: product.manufacturer + ' ' + product.name});
                }
            }
        }
    }

    get remainingProducts(): Array<any> {
        if (this.favoriteModel.productType === 'gsm-devices') {
            return this.sortByValue(this.gsmDevicesRem);
        } else if (this.favoriteModel.productType === 'mi-devices') {
            return this.sortByValue(this.miDevicesRem);
        } else if (this.favoriteModel.productType === 'accessories') {
            return this.sortByValue(this.accessoriesRem);
        }
        return null;
    }

    get selectedProducts(): Array<any> {
        if (this.favoriteModel.productType === 'gsm-devices') {
            return this.sortByValue(this.gsmDevicesSel);
        } else if (this.favoriteModel.productType === 'mi-devices') {
            return this.sortByValue(this.miDevicesSel);
        } else if (this.favoriteModel.productType === 'accessories') {
            return this.sortByValue(this.accessoriesSel);
        }
        return null;
    }

    sortByValue(products: Array<any>): Array<any> {
        if (products) {
            products.sort((a: any, b: any) => {
                if (a.value < b.value) {
                    return -1;
                } else if (a.value > b.value) {
                    return 1;
                } else {
                    return 0;
                }
            });
        }
        return products;
    }

    addProducts(): void {
        console.log('remProducts>>>' + this.favoriteModel.remProducts);
        if (this.favoriteModel.productType === 'gsm-devices') {
            if (!this.gsmDevicesSel) { this.gsmDevicesSel = new Array(); }
            let remProducts = new Array();
            for (let product of this.gsmDevicesRem) {
                if (this.favoriteModel.remProducts.includes(product.key)) {
                    this.gsmDevicesSel.push(product);
                } else {
                    remProducts.push(product);
                }
            }
            this.gsmDevicesRem = remProducts;
        } else if (this.favoriteModel.productType === 'mi-devices') {
            if (!this.miDevicesSel) { this.miDevicesSel = new Array(); }
            let remProducts = new Array();
            for (let product of this.miDevicesRem) {
                if (this.favoriteModel.remProducts.includes(product.key)) {
                    this.miDevicesSel.push(product);
                } else {
                    remProducts.push(product);
                }
            }
            this.miDevicesRem = remProducts;
        } else if (this.favoriteModel.productType === 'accessories') {
            if (!this.accessoriesSel) { this.accessoriesSel = new Array(); }
            let remProducts = new Array();
            for (let product of this.accessoriesRem) {
                if (this.favoriteModel.remProducts.includes(product.key)) {
                    this.accessoriesSel.push(product);
                } else {
                    remProducts.push(product);
                }
            }
            this.accessoriesRem = remProducts;
        }
    }

    removeProducts(): void {
        if (this.favoriteModel.productType === 'gsm-devices') {
            if (!this.gsmDevicesRem) { this.gsmDevicesRem = new Array(); }
            let remProducts = new Array();
            for (let product of this.gsmDevicesSel) {
                if (this.favoriteModel.selProducts.includes(product.key)) {
                    this.gsmDevicesRem.push(product);
                } else {
                    remProducts.push(product);
                }
            }
            this.gsmDevicesSel = remProducts;
        } else if (this.favoriteModel.productType === 'mi-devices') {
            if (!this.miDevicesRem) { this.miDevicesRem = new Array(); }
            let remProducts = new Array();
            for (let product of this.miDevicesSel) {
                if (this.favoriteModel.selProducts.includes(product.key)) {
                    this.miDevicesRem.push(product);
                } else {
                    remProducts.push(product);
                }
            }
            this.miDevicesSel = remProducts;
        } else if (this.favoriteModel.productType === 'accessories') {
            if (!this.accessoriesRem) { this.accessoriesRem = new Array(); }
            let remProducts = new Array();
            for (let product of this.accessoriesSel) {
                if (this.favoriteModel.selProducts.includes(product.key)) {
                    this.accessoriesRem.push(product);
                } else {
                    remProducts.push(product);
                }
            }
            this.accessoriesSel = remProducts;
        }
    }

    updateProfile(): void {
        const METHOD_NAME: string = 'updateProfile()';
        let inputData: any = {};
        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';
            }
        }
        if (!this.cardsPerRow) {
            if (this.favoriteModel.cardsPerRow !== Constants.CARDS_PER_ROW) {
                inputData.cardsPerRow = Number(this.favoriteModel.cardsPerRow);
            }
        } else if (this.cardsPerRow !== this.favoriteModel.cardsPerRow) {
            inputData.cardsPerRow = Number(this.favoriteModel.cardsPerRow);
        }
        if (!this.cardsPerPage) {
            this.favoriteModel.cardsPerPage = (this.favoriteModel.rowsPerPage * this.favoriteModel.cardsPerRow);
            if (this.favoriteModel.cardsPerPage !== Constants.CARDS_PER_PAGE) {
                inputData.cardsPerPage = Number(this.favoriteModel.cardsPerPage);
            }
        } else if ((this.favoriteModel.rowsPerPage * this.favoriteModel.cardsPerRow) !== this.favoriteModel.cardsPerPage) {
            inputData.cardsPerPage = Number(this.favoriteModel.rowsPerPage * this.favoriteModel.cardsPerRow);
        }
        if (!this.ordersPerPage) {
            if (this.favoriteModel.ordersPerPage !== Constants.CARDS_PER_ROW) {
                inputData.ordersPerPage = Number(this.favoriteModel.ordersPerPage);
            }
        } else if (this.ordersPerPage !== this.favoriteModel.ordersPerPage) {
            inputData.ordersPerPage = Number(this.favoriteModel.ordersPerPage);
        }
        let prodIds: string = '';
        if (this.gsmDevicesSel) {
            for (let product of this.gsmDevicesSel) {
                prodIds += product.key + ',';
            }
            prodIds = prodIds.substring(0, prodIds.length - 1);
        }
        if (this.isNotEqual(this.favoriteDevicesGsm, prodIds)) {
            inputData.favoriteDevicesGsm = prodIds != null ? prodIds : '';
        }
        prodIds = '';
        if (this.miDevicesSel) {
            for (let product of this.miDevicesSel) {
                prodIds += product.key + ',';
            }
            prodIds = prodIds.substring(0, prodIds.length - 1);
        }
        if (this.isNotEqual(this.favoriteDevicesData, prodIds)) {
            inputData.favoriteDevicesData = prodIds != null ? prodIds : '';
        }
        prodIds = '';
        if (this.accessoriesSel) {
            for (let product of this.accessoriesSel) {
                prodIds += product.key + ',';
            }
            prodIds = prodIds.substring(0, prodIds.length - 1);
        }
        if (this.isNotEqual(this.favoriteAccessories, prodIds)) {
            inputData.favoriteAccessories = prodIds != null ? prodIds : '';
        }
        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.');
            this.user = Object.assign(this.user, result);
            this.userService.setUser(this.user);
            this.hide();
        }, error => {
            this.sharedService.showSpinner(false); // spinner
            this.errorMessage = error;
            // this.sharedService.showErrorMessage(error, true);
            console.error('error=>' + error);
        });
    }

    isNotEqual(orgArr1: string, repArr2: string): boolean {
        if (!orgArr1) { return true; }
        if (!repArr2) { return true; }
        let splitStr1 = orgArr1.split(/,| /);
        for (let item of splitStr1) {
            if (!item.includes(repArr2)) {
                return true;
            }
        }
        return false;
    }

    resetDefaults(): void {
        const METHOD_NAME: string = 'resetDefaults()';
        let inputData: any = {};
        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';
            }
        }

        inputData.headerBackground = 'black';
        inputData.sidebarBackground = 'black';
        inputData.sidebarActiveColor = 'info';
        inputData.contentBackground = 'gray';
        inputData.cardsPerRow = Constants.CARDS_PER_ROW;
        inputData.cardsPerPage = Constants.CARDS_PER_PAGE;
        inputData.ordersPerPage = Constants.ORDERS_PER_PAGE;
        inputData.favoriteDevicesGsm = '';
        inputData.favoriteDevicesData = '';
        inputData.favoriteAccessories = '';

        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.');
            this.user = Object.assign(this.user, result);
            this.userService.setUser(this.user);
            this.hide();
        }, error => {
            this.sharedService.showSpinner(false); // spinner
            this.errorMessage = error;
            // this.sharedService.showErrorMessage(error, true);
            console.error('error=>' + error);
        });
    }
}