import { Component, OnInit } from '@angular/core';
import {DatePipe} from '@angular/common';
import { StaffService } from '../../shared/service/staff.service';
import { IFilterKey } from '../../shared/core/IFilterKey';
import { IStaff } from '../../shared/core/IStaff';
import { ILifeEvents } from '../../shared/core/ILifeEvents';
import { OrganisationService } from '../../shared/service/organisation.service';
import { IOrganisation } from '../../shared/core/IOrganisation';
import { ILoginHistory } from '../../shared/core/ILoginHistory';
import { LoginHistoryService } from '../../shared/service/login-history.service';

declare var require:any;
@Component({
  selector: 'app-common-dashboard',
  templateUrl: './common-dashboard.component.html',
  styleUrls: ['./common-dashboard.component.css'],
  providers:[StaffService,OrganisationService,LoginHistoryService]
})
export class CommonDashboardComponent implements OnInit {

  filterKeys: IFilterKey[];
  staffList:IStaff[]=[];
  filterDate: Date;
  dashboardType:string='COMMON';
  selectedStaff:IStaff={Id:0,Company:null,Email:'',FirstName:'All',LastName:'',UniqueIdentifier:''};
  firstDay:string;
  lastDay:string;
  dateString: string;
  columns: { field: string; header: string; width: string; }[];
  //bind staff life events data
  lifeEvents : ILifeEvents[];
  totalEvents = 0;
  totalStaffs = 0;
  totalOtherOrganisations = 0;
  totalInternatOrganisations = 0;
  imageUrl:string = 'assets/images/crmxxx_profile_default_avatar.png';
  loginhistory: ILoginHistory[]=[];
  monthList:Date[]=[];
  staffLoggedData:any;
  options: any;
  
  constructor(private staffService:StaffService,private datePipe: DatePipe,private organisationService:OrganisationService,
    private loginHistoryService: LoginHistoryService) { }

  ngOnInit() {
    this.filterDate = new Date();
    this.getStaffList('0');

    // display date range
    this.displayDate();

    // list of the event table columns
    if(this.dashboardType=='COMMON'){
      this.columns = [
        { field: 'Organisation', header: 'Organisation',width: '40%' },
        { field: 'Staff', header: 'Staff' , width: '20%'},
        { field: 'Event', header: 'Event', width: '20%' },
        { field: 'Date', header: 'Date',width: '20%' }
      ];
    }
    else{
      this.columns = [
        { field: 'Staff', header: 'Staff' , width: '30%'},
        { field: 'Event', header: 'Event', width: '40%' },
        { field: 'Date', header: 'Date',width: '30%' }
      ];
    }
    

    // get evets of all the staff
    this.getStaffLifeEvent(this.selectedStaff.Id);
    
    // get organisation list
    this.geOrganisations('0');

    this.getStaffLoggedDetails();


  }

  // get staff list from the backend
  getStaffList(id:string){ 
    this.staffService.getStaffList(id, this.filterKeys).subscribe(staffList=>
    {
      // bind organisation list
      this.staffList = staffList;

      this.totalStaffs = staffList.length;

      var staff:IStaff={Id:0,Company:null,Email:'',FirstName:'All',LastName:'',UniqueIdentifier:''}
      this.staffList.splice(0, 0, staff);
    })
  }

  // select staff from dropdown
  selectStaff(){
    if(this.selectedStaff!=undefined){
      if(+this.selectedStaff.Id > 0){
        this.dashboardType = 'STAFF';
        this.imageUrl = this.selectedStaff.ProfilePicture;
      }
      else{
        this.dashboardType = 'COMMON';
        this.imageUrl = 'assets/images/crmxxx_profile_default_avatar.png';
        this.geOrganisations('0');
      }
    }
    else{
      this.dashboardType = 'COMMON';
      this.imageUrl = 'assets/images/crmxxx_profile_default_avatar.png';
      this.geOrganisations('0');
    }
    // list of the event table columns
    if(this.dashboardType=='COMMON'){
      this.columns = [
        { field: 'Organisation', header: 'Organisation',width: '40%' },
        { field: 'Staff', header: 'Staff' , width: '20%'},
        { field: 'Event', header: 'Event', width: '20%' },
        { field: 'Date', header: 'Date',width: '20%' }
      ];
    }
    else{
      this.columns = [
        { field: 'Staff', header: 'Staff' , width: '30%'},
        { field: 'Event', header: 'Event', width: '40%' },
        { field: 'Date', header: 'Date',width: '30%' }
      ];
    }
    
    this.lifeEvents = [];
    this.getStaffLifeEvent(this.selectedStaff.Id);
  }

  // get date range string
  displayDate(){
    var date = this.filterDate;
    this.firstDay = this.datePipe.transform(new Date(date.getFullYear(), date.getMonth(), 1),"dd MMM");
    this.lastDay = this.datePipe.transform(new Date(date.getFullYear(), date.getMonth() + 1, 0),"dd MMM yyyy");

    this.dateString = this.firstDay + ' - ' + this.lastDay;
  }

  //get staff life events from service and bind data to the object
  getStaffLifeEvent(id: number){
    let idVal = id.toString();
    this.staffService.getStaffEvents(idVal).subscribe( events =>{
      //this.lifeEvents = events;
      events.forEach(event => {
        var date = new Date(event.EventDate);
        
        if(date!=undefined){
          var month = date.getMonth();
          if(this.filterDate.getMonth()==month){
            this.lifeEvents.push(event);


          }
        }

        event.EventDateStr = this.datePipe.transform(new Date(date.getFullYear(), date.getMonth() + 1, 0),"dd MMM yyyy");
        event.Staff= this.staffList.find(x=>x.Id==event.StaffId);

      });   

      this.totalEvents = (this.lifeEvents!=undefined) ? this.lifeEvents.length :0;
    })

    console.log(this.filterDate);
  }

  // select Date from the calendar
  selectDate(event:any){
    
    this.displayDate();

    this.lifeEvents = [];

    this.getStaffLifeEvent(this.selectedStaff.Id);
    // this.lifeEvents.forEach(event => {
    //   var date = new Date(event.EventDate);
    //   if(date!=undefined){
    //     var month = date.getMonth();
    //     if(this.filterDate.getMonth()==month){
    //       this.lifeEvents.push(event);
    //     }
    //   }
    // });    
  }

  // get organisation list
  geOrganisations(id:string){
    this.organisationService.getOrganisations(id,this.filterKeys).subscribe(companies=>
      {
        if(companies!=undefined){
          this.totalInternatOrganisations = companies.filter(c=>c.Type.toUpperCase() == 'INTERNAL').length;
          this.totalOtherOrganisations = companies.filter(c=>c.Type.toUpperCase() != 'INTERNAL').length;
        }

      })
  }

  getStaffLoggedDetails(){
    this.loginHistoryService.getLoginHistory().subscribe(historyList=>
      {
        //both vars will fill with data
        this.loginhistory = historyList;        
 
        historyList.forEach(element => {
          var date = new Date(element.LastLogin);
          this.monthList.push(date);
          element.LastLoginDate = date;
          element.loggedDuration = Math.abs(new Date(element.LastActive).getTime() - date.getTime()) / 36e5;
          element.monthYear = this.datePipe.transform(new Date(date.getFullYear(), date.getMonth() + 1, 0),"MMM yyyy");
        });



        //remove duplicates
        this.monthList = this.monthList.filter((test, index, array) =>
        index === array.findIndex((findTest) =>
          (findTest.getMonth() === test.getMonth() && findTest.getFullYear() === test.getFullYear())
        ));

      // var labels:string[]=[];
      // var data:number[]=[];

      // this.monthList.forEach(element => {
      //   labels.push(this.datePipe.transform(new Date(element.getFullYear(), element.getMonth() + 1, 0),"MMM yyyy"))
      //   var numberOfRecords = historyList.filter(x=>x.monthYear == this.datePipe.transform(new Date(element.getFullYear(), element.getMonth() + 1, 0),"MMM yyyy"));
      //   var totalHours = 0;
      //   // get the sum of the hours
      //   numberOfRecords.forEach(record => {
      //     totalHours = totalHours + record.loggedDuration;
      //   });

      //   var averageValue = 0;
      //   averageValue = totalHours/numberOfRecords.length;
      //   data.push(averageValue);
      const moment = require('moment');
moment.locale('en'); // sets words language (optional if current locale is to be used)
moment.months();
var allMonths = moment.monthsShort();

var labels:string[]=[];
var data:number[]=[];
data.length = 12;
data.fill(0,0,12);

var currentYear = new Date().getFullYear();
allMonths = allMonths.map(x => x +' ' + currentYear);
labels = allMonths;

this.monthList.forEach(element => {
//labels.push(this.datePipe.transform(new Date(element.getFullYear(), element.getMonth() + 1, 0),"MMM yyyy"))
var selectedMonth = this.datePipe.transform(new Date(element.getFullYear(), element.getMonth() + 1, 0),"MMM yyyy");
var numberOfRecords = historyList.filter(x=>x.monthYear == selectedMonth);
var totalHours = 0;
// get the sum of the hours
numberOfRecords.forEach(record => {
totalHours = totalHours + record.loggedDuration;
});

var averageValue = 0;
averageValue = totalHours/numberOfRecords.length;

var index = labels.findIndex(x=>x == selectedMonth)
data[index]=averageValue;

      });


      this.staffLoggedData = {
        labels:labels,
        datasets: [
            {
                
                backgroundColor: '#005b9f',
                borderColor: '#005b9f',
                data: data,
                mousemove: this.test(),
                hoverBackgroundColor: '#8f0707'
            },
            
        ]
      }
      this.options= {
        scales: {
            yAxes: [{
                ticks: {
                    suggestedMin: 0
                }
            }]
        },
       events: ['hover','mouseover','mousemove','mouseout','mousein'],
       mouseOver: function () {
        this.staffLoggedData.datasets.backgroundColor = 'red';
      },
        tooltips: {
          // Disable the on-canvas tooltip
          enabled: false,
        
          custom: function(tooltipModel) {
              // Tooltip Element
              var tooltipEl = document.getElementById('chartjs-tooltip');


              // set tool tip content
              var selectedValue = tooltipModel.title[0];

              tooltipModel.body[0].lines[0] = "<ul>";

              var records = historyList.filter(x=>x.monthYear == selectedValue);

              records.forEach(element => {
                tooltipModel.body[0].lines[0] =  tooltipModel.body[0].lines[0] + "<li><b>" + element.loggedDuration+ " hrs</b>" + " from " + element.Company.CompanyName + "</li>";
              });
              tooltipModel.body[0].lines[0] =  tooltipModel.body[0].lines[0] + "</ul>" ;
              
              tooltipModel.title[0]="";

              console.log(tooltipModel.body[0].lines[0])

              // Create element on first render
              if (!tooltipEl) {
                  tooltipEl = document.createElement('div');
                  tooltipEl.id = 'chartjs-tooltip';
                  tooltipEl.innerHTML = '<table></table>';
                  document.body.appendChild(tooltipEl);
              }

              // Hide if no tooltip
              if (tooltipModel.opacity === 0) {
                  
                  return;
              }

              // Set caret Position
              tooltipEl.classList.remove('above', 'below', 'no-transform');
              if (tooltipModel.yAlign) {
                  tooltipEl.classList.add(tooltipModel.yAlign);
              } else {
                  tooltipEl.classList.add('no-transform');
              }

              function getBody(bodyItem) {
                  return bodyItem.lines;
              }

              // Set Text
              if (tooltipModel.body) {
                  var titleLines = tooltipModel.title || [];
                  var bodyLines = tooltipModel.body.map(getBody);

                  var innerHtml = '<thead>';

                  titleLines.forEach(function(title) {
                      innerHtml += '<tr><th>' + title + '</th></tr>';
                  });
                  innerHtml += '</thead><tbody>';

                  bodyLines.forEach(function(body, i) {
                      var colors = tooltipModel.labelColors[i];
                      var style = 'background:' + colors.backgroundColor;
                      style += '; border-color:' + colors.borderColor;
                      style += '; border-width: 2px';
                      var span = '<span style="' + style + '"></span>';
                      innerHtml += '<tr><td>' + span + body + '</td></tr>';
                  });
                  innerHtml += '</tbody>';

                  var tableRoot = tooltipEl.querySelector('table');
                  tableRoot.innerHTML = innerHtml;
              }

              // `this` will be the overall tooltip
              var position = this._chart.canvas.getBoundingClientRect();

              // Display, position, and set styles for font
              
              tooltipEl.style.position = 'absolute';
              tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px';
              tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px';
              tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily;
              tooltipEl.style.fontSize = tooltipModel.bodyFontSize + 'px';
              tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle;
              tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';
              tooltipEl.style.background = '#000';
              tooltipEl.style.color='#fff';
              

          }
      }
      }

        console.log(this.monthList)
      })
  }

  test(){
    console.log('mmm')
  }
}