/**
* @Component Name: MoreDetailsComponent
* @Module: Home
* @Module Functionality : To display the product more details
* @Creation Date: August 12,2017
* @Author: sbaireddy
* @Version: 1.0
*/
import { Component, Input, OnInit, OnDestroy, AfterViewInit } from '@angular/core';

import Utils from '../../shared/utils';
import * as Constants from '../../shared/constants';
import { RATEPLAN_MOREINFO, DEVICE_MOREINFO, FEATURE_MOREINFO, ACCESSORY_MOREINFO } from '../../shared/form.constants';
import { IKeyValue } from '../../shared/modal/key.value';
import { ITabInfo, IMoreInfoList, IMoreInfo } from '../../shared/modal/common';

import { SharedService } from '../../shared/shared.service';
import { CatalogService } from '../../services/catalog.service';
import { MoreDetailsService } from './../../shared/more-details-modal.service';

declare var jQuery: any;

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

export class MoreDetailsComponent implements OnInit, OnDestroy, AfterViewInit  {
    private COMPONENT_NAME: string = 'MoreDetailsComponent';
    visible: boolean = false;
    visibleAnimate: boolean = false;

    storeId: number = 10553;
    name: string = null;
    tabHeader: ITabInfo[] = null;
    moreInfoList: any[] = null;
    moreDetailsResponse: IMoreInfoList[] = [];

    @Input() product: any;

    constructor(
        public sharedService: SharedService,
        public catalogService: CatalogService,
        public moreDetailsService: MoreDetailsService) {  }
    /**
    * 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.
    * @return void
    */
    ngOnInit(): void {
        const METHOD_NAME: string = 'ngOnInit()';
        // this.sharedService.addLogging(this.COMPONENT_NAME, METHOD_NAME, 'Item more details view');
        console.log('[start]-MoreDetailsComponent.ngOnInit()');
        // Start-Switch Channel-Store id update
        this.sharedService.storeId.subscribe((val: number) => {
            this.storeId = val;
            console.log('updated storeid' + this.storeId);
        });
        // End-Switch Channel-Store id update
        console.log('[end]-MoreDetailsComponent.ngOnInit()');
    }
    /**
    * 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.tabHeader = null;
        this.moreDetailsResponse = null;
    }

    ngAfterViewInit(): void {
        this.show();
        console.log("Product ==>>",this.product);
    }

    /**
     * This function is used to display the  object.
     * @returns void
     */
    public show(): void {
        const METHOD_NAME: string = 'show()';
        this.loadMoreDetail();
        this.visible = true;
        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;
        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, setModalStatus): void {
        const METHOD_NAME: string = 'onContainerClicked()';
        if ((<HTMLElement>event.target).classList.contains('modal')) {
            this.hide();
            this.closeMoreDetailsModal(setModalStatus);
        }
    }

    public closeMoreDetailsModal(close: string): void{
        this.moreDetailsService.setMessage(close);
    }

    /**
     * This function is used for load additional informations of the particular product through
     * getProductMoreInfo function of catalog service.
     * @returns void
     */
    public  loadMoreDetail(): void {
        const METHOD_NAME: string = 'loadMoreDetail()';
        this.sharedService.addLogging(this.COMPONENT_NAME, METHOD_NAME, 'Loading more item information');
        if (this.product && this.product.productId)  {
            if (this.product.categoryId === Constants.CATEGORY_ID_PLAN) {
                this.tabHeader = RATEPLAN_MOREINFO;
                this.name = this.product.name;
            } else if (this.product.categoryId === Constants.CATEGORY_ID_DEVICE) {
                this.tabHeader = DEVICE_MOREINFO;
                this.name = this.product.manufacturer + ' ' + this.product.items[this.product.itemIndex].name;
            } else if (this.product.categoryId === Constants.CATEGORY_ID_FEATURE) {
                this.tabHeader = FEATURE_MOREINFO;
                this.name = this.product.name;
            } else if (this.product.categoryId === Constants.CATEGORY_ID_ACCESSORY) {
                this.tabHeader = ACCESSORY_MOREINFO;
                this.name = this.product.manufacturer + ' ' + this.product.items[this.product.itemIndex].name;
            }
            this.sharedService.showSpinner(true);
            this.catalogService.getProductMoreInfo(this.storeId, this.product.productId).subscribe(result => {
                this.moreDetailsResponse = result;
                this.sharedService.showSpinner(false); // spinner
                // @mani ==> Setting the tab heading based on DEVICE_MOREINFO
                if (!result[0]) {
                    result = [];
                }
                result.forEach(info => {
                    const headingFilter = this.tabHeader.filter(tab => {
                        return info.group === tab.key;
                    });
                    info['tabId'] = info.group;
                    info.group = (headingFilter.length !== 0) ? headingFilter[0].title : info.group;
                });
                this.moreInfoList = result;
                console.log('got more info...' + this.moreInfoList);
            }, error => {
                this.sharedService.showSpinner(false); // spinner
                console.error('error=>' + error);
                this.sharedService.showErrorMessage(error, true);
            });
        }
    }
}