import { Component, Input, OnInit, OnChanges, OnDestroy } from '@angular/core';

import * as Constants from '../..//shared/constants';
import { SharedService } from '../../shared/shared.service';
import { MarketingService } from '../../services/marketing.service';

declare var $: any;

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

export class EspotComponent implements OnInit, OnChanges, OnDestroy {
    private COMPONENT_NAME: string = 'EspotComponent';
    storeId: number = Constants.STORE_ID_CD;
    @Input() bannerName: string;
    staticHtml: string;
    constructor(
        public sharedService: SharedService,
        public marketingService: MarketingService) {
    }

    /**
    * This function is called whenever one or more data-bound input properties change
    * and also getEspotStaticContent function is called by marketing service to get statis content.
    * @returns void
    */
    ngOnInit(): void {
        const METHOD_NAME: string = 'ngOnInit()';
        $('.carousel').carousel({
            interval: 2000
        });
    }

    /**
    * Cleanup just before Angular destroys the directive/component.
    * Unsubscribe Observables and detach event handlers to avoid memory leaks.
    * @returns void
    */
    ngOnChanges(): void {
        const METHOD_NAME: string = 'ngOnChanges()';
        this.sharedService.storeId.subscribe((val: number) => {this.storeId = val; });
        if (this.bannerName) {
            // this.sharedService.showSpinner(true);//spinner(don't need to block the user)
            this.marketingService.getEspotStaticContent(this.storeId, this.bannerName).subscribe(result => {
                // this.sharedService.showSpinner(false);//spinner(don't need to block the user)
                this.staticHtml = result;
            }, error => {
                console.error('error=>' + error);
                // this.sharedService.showSpinner(false);//spinner(don't need to block the user)
            });
        }
    }
    /**
    * 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.bannerName = null;
        this.staticHtml = null;
    }
}