/**
* @Component Name: FeedbackComponent
* @Module: Home
* @Module Functionality : Feed back from agent
* @Creation Date: August 12,2017
* @Author: sbaireddy
* @Version: 1.0
*/
import { Component, ViewChild, Input, OnInit, OnChanges, OnDestroy } from '@angular/core';
import { NgForm } from '@angular/forms';

import Utils from '../utils';
import * as Constants from '../constants';
import * as FormConstants from '../form.constants';
import { User } from '..//modal/user';
import { SharedService } from '..//shared.service';
import { UserService } from '../../services/user.service';
import { MarketingService } from '../../services/marketing.service';

declare var jQuery: any;

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

export class FeedbackComponent implements OnInit, OnDestroy, OnChanges {
    private COMPONENT_NAME: string = 'FeedbackComponent';
    visible: boolean = false;
    visibleAnimate: boolean = false;
    storeId: number;
    user: User;
    feedbackForm: NgForm;
    errorMessage: string;
    feedbackModel: any = {email: 'sreekantha.baireddy@t-mobile.com', subject: 'FR1', content: 'Heloo'};
    @ViewChild('fileInput') fileInput;

    ratingClicked: number;
    items: any[] = [
        {
            'id': 0,
            'rating': 3,
            'contact': 'Sreeanth Baireddy',
            'company': 'T-Mobile USA, Inc.'
        }
    ];
    feedbackReasons: any = FormConstants.FEEDBACK_REASONS;
    constructor(
        public sharedService: SharedService,
        public userService: UserService,
        public marketingService: MarketingService) {
    }

    /**
    * 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 function is called whenever one or more data-bound input properties change
    * @returns 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.user = null;
        this.feedbackForm = null;
        this.feedbackModel = null;
    }

    /**
    * This function used to display the  object.
    * @return void
    */
    public show(): void {
        const METHOD_NAME: string = 'show()';
        this.visible = true;
        setTimeout(() => this.visibleAnimate = true, 100);
        // this.feedbackForm.reset();
        this.user = this.userService.getUser();
        this.sharedService.storeId.subscribe((val: number) => {this.storeId = val; });
        this.fileInput.nativeElement.value = '';
        this.feedbackModel = {subject: this.feedbackReasons[0].key, content: ''};
    }

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

    addFile(event: any): void {
        const fi = this.fileInput.nativeElement;
        if (fi.files && fi.files[0]) {
            this.feedbackModel.fileName = fi.files[0].name;
        }
        if (event) {
            this.feedbackModel.filePath = event.target.result;
        }
    }

    ratingComponentClick(clickObj: any): void {
        this.ratingClicked = clickObj.rating;
        console.log(this.ratingClicked);
    }

    removeAttachment(): void {
        this.fileInput.nativeElement.value = '';
        this.feedbackModel.fileName = null;
    }

    /**
    * This function is used to confirm the authentication.
    * @returns void
    */
    sendFeedback(): void {
        const METHOD_NAME: string = 'sendFeedback()';
        const inputData = new FormData();
        const fi = this.fileInput.nativeElement;
        if (fi.files && fi.files[0]) {
            inputData.append('multipartFile', fi.files[0]);
        }
        // inputData.append("feedback", feedback);
        inputData.append('logonId', this.user.logonId);
        inputData.append('subject', this.feedbackModel.subject);
        inputData.append('content', this.feedbackModel.content);
        inputData.append('rating', this.items[0].rating);

        this.sharedService.showSpinner(true); // spinner
        this.marketingService.sendFeedback(this.storeId, inputData).subscribe(result => {
            this.sharedService.showSpinner(false); // spinner
            this.hide();
        }, error => {
            this.sharedService.showSpinner(false); // spinner
            this.errorMessage = Utils.getErrorValue(error);
            // this.sharedService.showErrorMessage(error, true);
            console.error('error=>' + error)
        });
    }
}