import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { LocalStorageService } from 'angular-2-local-storage';
import { AuthService } from '../../services/auth.service';
import {OnClickEvent, OnRatingChangeEven, OnHoverRatingChangeEvent} from "angular-star-rating/star-rating-struct";
import { ToastsManager } from 'ng2-toastr/ng2-toastr';
import { environment } from '../../../environments/environment.dev';

@Component({
  selector: 'app-feedbackmodal',
  templateUrl: './feedbackmodal.component.html',
  styleUrls: ['./feedbackmodal.component.scss']
})
export class FeedbackmodalComponent implements OnInit {

  @Input() openTheFdM;
  @Output() closeTheFdM = new EventEmitter();
  feedKinds:any;
  feedBackFormdet:any;
  empData:any;
  loggedInUserRole: string;
  isError: boolean = false;
  errorMsg: string;
  imageUrl: string = environment.imageUrl;
  
  constructor(protected localStorageService: LocalStorageService, private AuthService: AuthService, private toastr: ToastsManager) {
    this.feedBackFormdet = {};
    this.empData = this.localStorageService.get('userInfo');
    console.log(this.empData);
   }

  ngOnInit() {
    this.feedKinds = [{'type':'Suggestion'}, {'type':'Complaint'}, {'type':'Change Requests'}];
    console.log("inside feedback modal comp -- ",this.openTheFdM);
    if(this.openTheFdM){
      document.getElementById("showFeedBackModal").click();
    }
    this.loggedInUserRole = this.localStorageService.get('userSession');
    if(!this.loggedInUserRole){
      this.loggedInUserRole = this.empData.roleName;
      console.log("role after/ frm empdata", this.loggedInUserRole);
    }
    console.log("empData", this.empData);
  }

  submitAplnFeedback(){
    this.isError = false;
    if(!this.empData.email){
      this.empData.email = this.empData.emailId;
    }
    this.feedBackFormdet.userInfoMstrId = this.empData.userInfoMstrId;
    this.feedBackFormdet.email = this.empData.email;
    this.feedBackFormdet.loggedInUserRole = this.loggedInUserRole;
    this.feedBackFormdet.createdDate = new Date().toISOString();
    this.feedBackFormdet.name = this.empData.fullName;
    this.feedBackFormdet.createdBy = this.empData.fullName;
    this.feedBackFormdet.updatedBy = '';
    this.feedBackFormdet.updatedDate = '';

    // console.log('form data',this.feedBackFormdet);
    if(!this.feedBackFormdet.feedbackType){
      this.isError = true;
      this.errorMsg = "Please select the type";
    }
    else if(!this.feedBackFormdet.description){
      this.isError = true;
      this.errorMsg = "Please provide a comment";
    }
    else if(!this.feedBackFormdet.rating){
      this.isError = true;
      this.errorMsg = "Please provide the rating";
    }
    else if(this.isError == false){
      console.log('Request -- ',this.feedBackFormdet);
      this.AuthService.submitApplnFeedback(this.feedBackFormdet).then(resp =>{
        if(resp.error){
         this.toastr.error(resp.error);
        }
        else{
            this.closeFdModal();
            this.toastr.success("Feedback Submitted Successfully !!")
        }
      })
    }
  }

  closeFdModal(){
    this.openTheFdM = false;
    // console.log(this.openTheFdM);
    this.closeTheFdM.emit(false);
  }

  onClickResult:OnClickEvent;
    onHoverRatingChangeResult:OnHoverRatingChangeEvent;
    onRatingChangeResult:OnRatingChangeEven;

    onClick = ($event:OnClickEvent) => {
        console.log('onClick $event: ', $event);
        this.onClickResult = $event;
        this.feedBackFormdet.rating = this.onClickResult.rating;
    };

    onRatingChange = ($event:OnRatingChangeEven) => {
        console.log('onRatingUpdated $event: ', $event);
        this.onRatingChangeResult = $event;
    };

    onHoverRatingChange = ($event:OnHoverRatingChangeEvent) => {
        console.log('onHoverRatingChange $event: ', $event);
        this.onHoverRatingChangeResult = $event;
    };

}
