import { Component, OnInit, OnChanges, Input, OnDestroy, Output, AfterViewInit, EventEmitter, Pipe, PipeTransform, HostListener, HostBinding } from '@angular/core';
import { CourseCardType, Course } from 'app/models/capability-transformation/course-list.model';
import { EmployeeHttpService } from 'app/services/employee/employee-http.service';
import { Subject } from 'rxjs/Subject';
import { Utils } from 'app/utils';
import { EventStatus } from 'app/models/assessment/assessment.model';
import * as $ from 'jquery';
import { environment } from '../../../../environments/environment.dev';

@Component({
  selector: 'app-bny-employee-course-card',
  templateUrl: './bny-employee-course-card.component.html',
  styleUrls: ['./bny-employee-course-card.component.scss']
})
export class BnyEmployeeCourseCardComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit {
  @Input() role: any;
  @Input() course: Course;
  @Input() viewDetailsBtn: boolean;
  @Input() hideDuration: string;
  @Input() toChangeCursor: string;
  @Input() classForParentBox: string;
  @Input() showHoverShadowEffect: string;
  @Input() type: CourseCardType = CourseCardType.default;
  @Output() selectCourseEvent = new EventEmitter();
  @Output() updateCourseEvent = new EventEmitter();
  @Output() selectedCouseCardId = new EventEmitter();
  @Output() deleteCourseEvent = new EventEmitter();
  @Output() gotoAssessment = new EventEmitter();
  @HostBinding('class.extended') extended = false;
  @HostBinding('class.assessment') assessment = false;
  @Input() showGoto: any;
  @Input() shoCount: any;
  @Input() heightCard: any;
  @Input() selectedItem: any;
  @Input() selectedIndex: any;
  @Output() deleteItem = new EventEmitter<any>();
  assessmentPageUrl = '/employee/dashboard/assessment';

  displayFooter = [CourseCardType.inprogress, CourseCardType.assessment, CourseCardType.overdue].indexOf(this.type) > -1;
  private $destroyed = new Subject();
  otherSubscribedUsersCount = 0;
  subscribedUsers: number[] = [];
  rating: number[] = [];
  testStatus = EventStatus;
  showDetailsBtn: any;
  videDetBtnArry = [];
  imageUrl: string = environment.imageUrl;
  constructor(
    private employeeHttpService: EmployeeHttpService
  ) { }
  ngAfterViewInit() {
    //  $(function (){
    //     $('[data-toggle = "popover"]').popover();
    //  });s
  }
  ngOnInit() {
    if (!this.course) {
      this.course = new Course();
    }
    this.extended = this.type === CourseCardType.inprogress || this.type === CourseCardType.overdue;
    this.assessment = this.type === CourseCardType.assessment;
    this.displayFooter = [CourseCardType.inprogress, CourseCardType.assessment, CourseCardType.overdue].indexOf(this.type) > -1;
    if (this.course.rating) {
      this.rating = Array(Math.floor(this.course.rating));
    }

    if (this.course.usersSubscribedToCourse) {
      this.otherSubscribedUsersCount = this.course.usersSubscribedToCourse.length - 3;
      this.employeeHttpService.getListEmployeeDetails(this.course.usersSubscribedToCourse.slice(0, 3)).takeUntil(this.$destroyed)
        .subscribe(data => {
          this.subscribedUsers = data.pgUserInfoDtlsList.map(users => {
            return {
              userId: users.pgUserInfoMstr.userInfoMstrId,
              initials: Utils.Initials(users.pgUserInfoMstr.fullName)
            };
          });
        });
    }
  }

  ngOnChanges() {
    this.ngOnInit();
  }

  selectCourse(event: any) {
    event.preventDefault();
    this.selectCourseEvent.emit(event);
  }

  deleteCourse(event: any) {
    event.preventDefault();
    this.deleteCourseEvent.emit(event);
  }

  deleteSelectedAssessment(id){
    this.deleteItem.emit(id)
  }


  viewDetails() {
    window.open(this.course.courseLink);
  }
  viewCardDetails(id) {
    this.selectedCouseCardId.emit(id);
  }
  startCourse(event: any) {
    if (this.type === CourseCardType.default) {
      this.updateCourse(event);
    }
    this.viewDetails();
  }

  updateCourse(event: any) {
    this.updateCourseEvent.emit(event);
  }

  gotoAssessmentEvnt(id) {
    this.gotoAssessment.emit(id);
  }

  getDuration() {
    let duration;
    if (this.course.duration) {
      duration = this.course.duration.split(':')[1].slice(0, -3);
      duration = duration + ' ' + (duration < 2 ? 'Hour' : 'Hours');
    }
    return duration;
  }

  getOverdue(): number {
    if (this.course.dueDate) {
      return Utils.getDatesDaysDifference(new Date(), new Date(this.course.dueDate));
    } else {
      return 0;
    }
  }

  ngOnDestroy() {
    this.$destroyed.next();
    this.$destroyed.complete();
  }
}
