/**
* @Component Name: compareDetailsComponent
* @Module: Home
* @Module Functionality : To Compare the devices
* @Creation Date: August 12,2017
* @Author: Manivannan S
* @Version: 1.0
*/
import { Component, Input, OnInit, OnChanges, Output, EventEmitter, OnDestroy, AfterViewInit } from '@angular/core';

import Utils from '../../shared/utils';
import * as Constants from '../../shared/constants';
import { IKeyValue } from '../../shared/modal/key.value';
import { IMoreInfoList, IMoreInfo, IFilter } from '../../shared/modal/common';

import { SharedService } from '../../shared/shared.service';
import { CatalogService } from '../../services/catalog.service';
import { CompareService } from '../../shared/compare-modal.service';
import * as _ from 'underscore';

declare var jQuery: any;

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

export class CompareComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit {
    private COMPONENT_NAME: string = 'CompareComponent';
    visible: boolean = false;
    visibleAnimate: boolean = false;
    moreInfoList: IMoreInfoList[] = [];
    imageBaseUrl: string = Constants.IMAGE_BASE_URL;
    @Input() products: any;
    @Input() features: IFilter[];
    @Input() loanCrp: any;
    @Input() leaseCrp: any;
    categoryId: number;
    deviceCategoryId: number = Constants.CATEGORY_ID_DEVICE;
    accessoryCategoryId: number = Constants.CATEGORY_ID_ACCESSORY;
    compareProducts: any;
    overview: string = Constants.OVERVIEW;
    overviewKeys: string[];
    compatibility: string = Constants.COMPATIBILITY;
    compatibilityKeys: string[];
    maximumCompare: number = Constants.MAXIMUM_COMPARE;
    karmaTestResult: any = {};


    constructor(public sharedService: SharedService, public catalogService: CatalogService, public compareService: CompareService) { }

/**
* 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.t
* @return void
*/
    ngOnInit(): void {
        const METHOD_NAME: string = 'ngOnInit()';
    }

/**
* This function is called whenever one or more data-bound input properties change
* @return void
*/
    ngOnChanges(): void {
        const METHOD_NAME: string = 'ngOnChanges()';
    }

/**
* Cleanup just before Angular destroys the directive/component.
* Unsubscribe Observables and detach event handlers to avoid memory leaks.
* @return void
*/
    ngOnDestroy(): void {
        const METHOD_NAME: string = 'ngOnDestroy()';
        this.moreInfoList = null;
        this.karmaTestResult = null;
        this.compareProducts = null;
        this.products = null;
        this.features = null;
        this.overviewKeys = null;
        this.compatibilityKeys = null;
    }

    ngAfterViewInit(): void {
        this.show();
    }

/**
* This function used to display the product comparison
* @return void
*/
    public show(): void {
        const METHOD_NAME: string = 'show()';
        this.sharedService.addLogging(this.COMPONENT_NAME, METHOD_NAME, 'Displaying the device comparison');
        this.visible = true;
        setTimeout(() => this.visibleAnimate = true, 100);
        if (this.products && this.products.length > 0) {
            this.compareProducts = new Array<any>();
            this.overviewKeys = null;
            this.compatibilityKeys = null;
            // loading more details for each product
            for (const product of this.products) {
                console.log('producst: ' + JSON.stringify(product));
                this.categoryId = product.categoryId;
                this.getMoreDetails(product);
            }
        }
    }
    /**
     * This function is used to hide the object.
     * @returns void
     */
    public hide(): void {
        const METHOD_NAME: string = 'hide()';
        this.visibleAnimate = false;
        setTimeout(() => this.visible = false, 300);
    }

    public closeCompareModal(close: string): void{
        this.compareService.setMessage(close);
    }

    /**
     * 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, setModalStatus: string): void {
        const METHOD_NAME: string = 'onContainerClicked()';
        if ((<HTMLElement>event.target).classList.contains('modal')) {
            this.hide();
            this.closeCompareModal(setModalStatus);
        }
    }

/**
* This function used to show the more details of a product through
* getProductMoreInfo function in catalog service
* @param {any} product - Contains the product information
* @return {void}
*/
    getMoreDetails(product: any): void {
        const METHOD_NAME: string = 'getMoreDetails()';
        this.sharedService.showSpinner(true);
        this.catalogService.getProductMoreInfo(Constants.STORE_ID_CD, product.productId).subscribe(result => {
            this.karmaTestResult = result;
            this.sharedService.showSpinner(false); // spinner
            const obj: any = Object.assign({}, this, product);
            obj.moreInfoList = result;
            this.compareProducts.push(obj);
            this.updateOverviewKeys(result);
        }, error => {
            this.sharedService.showSpinner(false); // spinner
            console.error('error=>' + error);
            this.sharedService.showErrorMessage(error, true);
        });
    }
    /**
     * This function is used to update overviewKeys and compatibilityKeys
     * @param  {IMoreInfoList[]} moreInfoList contains list of product details.
     * @returns void
     */
    updateOverviewKeys(moreInfoList: IMoreInfoList[]): void {
        const METHOD_NAME: string = 'updateOverviewKeys()';
        if (Array.isArray(moreInfoList)) {
            this.moreInfoList = moreInfoList;
        }
        this.moreInfoList.forEach((element) => {
            if (element.group === this.overview) {
                if (!this.overviewKeys) {
                    this.overviewKeys = new Array<string>();
                }
                const names: Array<string> = new Array<string>();
                for (const moreInfo of element.itemList) {
                    names.push(moreInfo.name);
                }
                this.overviewKeys = Object.assign(this.overviewKeys, names);
                console.log(this.overviewKeys);
            } else if (element.group === this.compatibility) {
                if (!this.compatibilityKeys) {
                    this.compatibilityKeys = new Array<string>();
                }
                const names: Array<string> = new Array<string>();
                for (const moreInfo of element.itemList) {
                    names.push(moreInfo.name);
                }
                this.compatibilityKeys = Object.assign(this.compatibilityKeys, names);
                console.log(this.compatibilityKeys);
            }
        });
    }
    /**
     * This function is used to compare product details
     * @param  {IMoreInfoList[]} moreInfoList contains valid list of product details.
     * @param  {string} key contains valid item name
     * @returns string
     */
    getCompareValue(moreInfoList: IMoreInfoList[], group: string, key: string): string {
        const METHOD_NAME: string = 'getCompareValue()';
        for (const moreInfo of moreInfoList) {
            if (moreInfo.group === group) {
                for (const item of moreInfo.itemList) {
                    if (item.name === key) {
                        return item.value;
                    }
                };
            } else if (moreInfo.group === group) {
                for (const item of moreInfo.itemList) {
                    if (item.name === key) {
                        return item.value;
                    }
                };
            }
        }
        return null;
    }
    /**
     * This function is used to test whether the feature exists or not
     * @param  {any} product valid product details
     * @param  {string} featureName contains valid featureName
     * @returns boolean
     */
    isFeatureExisted(product: any, featureName: string): boolean {
        const METHOD_NAME: string = 'isFeatureExisted()';
        let existed: boolean = false;
        if (this.features) {
            for (const feature of this.features) {
                if (feature.name === featureName) {
                    if (feature.productIds.indexOf(product.productId) > -1) {
                        existed = true;
                    }
                }
            }
        }
        return existed;
    }
}