import {Component, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
// import {MatPaginator, MatTableDataSource} from '@angular/material';
import { AuthService } from '../../services/auth.service';
import { NavBarService } from 'app/pgm/pgm.service';
import  _ from 'lodash';
import { Pipe, PipeTransform } from '@angular/core';
import { PagerService } from '../../admin/inner-admin-pages/right-admin-panel/user-mgmt/_services/pager.service';
import { environment } from '../../../environments/environment.dev';

@Component({
  selector: 'app-pgm-reviewer-details',
  templateUrl: './pgm-reviewer-details.component.html',
  styleUrls: ['./pgm-reviewer-details.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class PgmReviewerDetailsComponent implements OnInit {
  allReviewDetails: any;
  rows = [];
  reorderable = true;
  roleStatus: boolean;
  colors = ["#009587","#01BCD5", "#663AB7","#E6A9E6", "#3F51B5", "#F8A9CA", "#6FDCDE", "#F2D2CD", "#F2CCDB"];
  columns = [
    { name: 'Employee Name', prop: 'assessmentCompletedBy' },
    { name: 'Usecase Title', prop: 'usecaseTitle' },
    { name: 'Reviewer Name', prop: 'reviewerName' },
    { name: 'Reviewer Status', prop: 'reviewerStatus' }
  ];

  columnWidths = [
    { column: 'assessmentCompletedBy', width: 100 },
    { column: 'usecaseTitle', width: 100 },
    { column: 'reviewerName', width: 100 },
    { column: 'reviewerStatus', width: 50 },
  ];
  @ViewChild('myTable') table: any;
  expanded: any = {};
  timeout: any;
  showHide:boolean = true;
  rowIndex: number = -1;
  showFNm: boolean = false;
   // pager object
   pager: any = {};
   // paged items
   pagedItems: any[];
   usr_img_path = environment.imageUrl+'/assets/img/admin/';

  constructor(private AuthService: AuthService, private navBarService: NavBarService, private pagerService: PagerService) {
    this.allReviewDetails = [];
    this.navBarService.setCurrentPage(6);
  }

  ngOnInit() {
    this.getReviewersDetails();
  }


  getReviewersDetails() {
    let reviewerUniq = [];
    this.AuthService.getAllReviewDetails().then(data => {
      this.allReviewDetails = JSON.parse(data._body);
      // this.allReviewDetails.forEach(element => {
        // for(let i=0; i<this.allReviewDetails.length; i++){
        //   for(let j=i + 1; j<this.allReviewDetails.length; j++){
        //      if((this.allReviewDetails[i].usecaseTitle  == this.allReviewDetails[j].usecaseTitle) && (this.allReviewDetails[i].assessmentCompletedBy == this.allReviewDetails[j].assessmentCompletedBy)){
        //         reviewerUniq.push({usecaseTitle:this.allReviewDetails[i].usecaseTitle, reviewerName: this.allReviewDetails[i].reviewerName, reviewerStatus:this.allReviewDetails[i].reviewerStatus})
        //      }
        //   }
        // }
        
        // reviewerUniq.push({usecaseTitle:element.usecaseTitle, reviewerName: element.reviewerName, reviewerStatus:element.reviewerStatus})
      // });
      console.log("reviewerUniq -- ", reviewerUniq);
      this.rows = this.allReviewDetails;
      // this.rows =  _.uniqBy(this.allReviewDetails,'usecaseTitle');
      // reviewerUniq= _.uniqBy(reviewerUniq,'usecaseTitle');
      console.log(this.rows);
      this.setPage(1);
    }).catch(err => {
      console.log(err);
    });
  }

  setPage(page: number) {
    if(this.pager.totalPages){
      if (page < 1 || page > this.pager.totalPages) {
          return;
      }
    }
    // get pager object from service
    this.pager = this.pagerService.getPager(this.rows.length, page);
    // console.log("Pager --- "+JSON.stringify(this.pager));
    // get current page of items
    this.pagedItems = this.rows.slice(this.pager.startIndex, this.pager.endIndex + 1);
    this.rowIndex = -1;
    this.showFNm = false;
  }

  getInitials(fullName: string) {
    if (fullName) {
      return fullName.replace(/\W*(\w)\w*/g, '$1').toUpperCase();
    }
  }

  getStatus(type) {
    const  status = {
      'pending': 'To Do',
      'passed': 'Done',
      'rejected': 'Done',
      'done':'Done',
      'default':'Invalid'
    };
    return status[type] || status['default'];
  }

  getcolor(x) {
    const status = x;
    let color = '';
    switch (status) {
      case 'Overdue':
        color = '#F97787';
        return color;
      case 'To Do':
        color = '#68CBFF';
        return color;
      case 'Done':
        color = '#15CC83';
        return color;
      default:
        color = '#ffffff';
        return color;
    }
  }

  // randomColor() {
  //   return  this.colors[Math.floor(Math.random() * (this.colors.length - 1)) + 0];
  // }

  getValue(value) {
    if (value === null || value === undefined) {
      return '-';
    } else {
      return value;
    }
  }

  toggleExpandRow(row) {
    console.log('Toggled Expand Row!', row);
    this.table.rowDetail.toggleExpandRow(row);
    this.showHide = !this.showHide
  }

  onDetailToggle(event) {
    console.log('Detail Toggled', event);
  }

  onPage(event) {
    clearTimeout(this.timeout);
    this.timeout = setTimeout(() => {
      console.log('paged!', event);
    }, 100);
  }

  toggleRvRow(i){
    this.rowIndex = -1;
    this.showFNm = false;
    this.rowIndex = i;
    console.log("rowIndex -- ",this.rowIndex);
    this.showFNm = true;
  }

  sortFn(data){
    console.log(data);
  }
}

@Pipe({ name: 'removeUnderscore' })
export class RemoveUnderscorePipe implements PipeTransform {
  transform(value: any, args?: any): any {
    return value.replace(/_/g, " ");
  }
}