import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { TimeCardService } from 'src/app/time-card/service/time-card.service';
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
import { SharedDataService } from 'src/app/hmg-common/services/shared-data-service/shared-data.service';
import { ModalController, IonSlides } from '@ionic/angular';
import { SelectPeriodComponent } from '../select-period/select-period.component';
import { GetDayAndHoursDetailsRequest } from 'src/app/time-card/service/models/get-day-hours-type-details.request';
import { GetTimeCardSummaryRequest } from 'src/app/time-card/service/models/get-time-card-summary.request';
import { MenuResponse } from 'src/app/hmg-common/services/menu/models/menu-response';
import * as moment from 'moment';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';

@Component({
  selector: 'app-time-card-details',
  templateUrl: './time-card-details.component.html',
  styleUrls: ['./time-card-details.component.scss'],
})
export class TimeCardDetailsComponent implements OnInit {
  slideView: any;
  sliderOne: any;
  month: any;
  year: any;
  preMonth: number;
  nextMonth: any;
  constructor(
    public timeCardService: TimeCardService,
    public common: CommonService,
    public modalController: ModalController,
    public sharedData: SharedDataService,
    public ts: TranslatorService
  ) { }

  public showMore: any = true;
  public menuType: any;
  public selEmp: string;
  public dateFrom: any = new Date();
  public dateTo: any = new Date();
  public selMenu: MenuResponse = new MenuResponse();
  public respID: number;
  public timeCardSummaryData: any = [];
  public dayHoursData: any = [];
  public selectedShift: any;
  public rightIconActive = false;
  public leftIconActive = false;
  public loadMore = false;
  public dayAndHoursPageNumber = 1;
  public selectedFilters: any = {};
  public selectedShiftFilter: any;
  public loadMoreDateHoursData = false;
  public monthName: any;
  public yearDate: any;
  public absentDays: number;
  public attendedDays: number;
  public futrueDays = 0;
  public totalAttendancePrecentage = 0;
  public arrDaysAttendance: any = [];
  public arrDaysAbsent: any = [];
  public arrDaysOff: any = [];
  public monthTitle: string = moment().format('MMMM');
  public yearTitle: string;
  public isChange = false;
  public activeMonth: any;
  public currentMonthName = this.getMonthName(new Date().getMonth() + 1);
  public showData = false;
  public currentYear = new Date().getFullYear();
  public dayHoursTypeDetailsList = [];
  public normalDays: any = [];
  public currentDate = new Date();
  public options = {
    cutoutPercentage: 80,
    tooltips: { enabled: false },
    legend: { display: false }
  };
  public data = {};

  ngOnInit() {
    this.showData = false;
    this.nextMonth = new Date().getMonth() + 2;
    this.preMonth = new Date().getMonth() - 2;
    if (this.preMonth < 0) {
      this.preMonth = this.preMonth * - 1;
    } else {
      this.preMonth = this.preMonth * - 1;
    }
    this.calendarConfig(this.getMonthName(new Date().getMonth() + 1) , new Date().getFullYear());
  }

  calendarConfig(month?, year?) {
    this.arrDaysOff = [];
    this.arrDaysAttendance = [];
    this.arrDaysAbsent = [];
    this.month = month;
    this.year = year;
    this.getTimeCardSummaryDetails(month, year);
    this.getDayHoursTypeDetails(month, year);
  }

  public getDayHoursTypeDetails(month?, year?) {
    console.log('getDayHoursTypeDetails');
    const dayAndHoursReqObj = new GetDayAndHoursDetailsRequest();
    this.monthName = month;
    this.yearDate = year;
    this.selEmp = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_EMP, false);
    this.respID = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_RESP_ID, false);
    this.selMenu = this.common.sharedService.getSharedData(MenuResponse.SHARED_DATA, false);
    this.menuType = this.selMenu.List_Menu.MENU_TYPE;

    dayAndHoursReqObj.P_SELECTED_EMPLOYEE_NUMBER = this.selEmp;
    dayAndHoursReqObj.P_MENU_TYPE = this.menuType;
    dayAndHoursReqObj.P_SELECTED_RESP_ID = this.respID;
    dayAndHoursReqObj.SearchMonth = this.monthName;
    dayAndHoursReqObj.SearchYear = this.yearDate;
    dayAndHoursReqObj.P_PAGE_NUM = this.dayAndHoursPageNumber;
    dayAndHoursReqObj.P_PAGE_LIMIT = 100;

    this.timeCardService.getDayHoursTypeDetails(dayAndHoursReqObj).subscribe((result) => {
      if (this.common.validResponse(result)) {
        console.log(result.GetDayHoursTypeDetailsList);
        this.common.sharedService.setSharedData(result.GetDayHoursTypeDetailsList, 'RTP_IDs');
        this.countAllAttendDays(result.GetDayHoursTypeDetailsList);
        this.dayHoursTypeDetailsList = result.GetDayHoursTypeDetailsList;
      }
    });

  }

  countAllAttendDays(allDays) {
    // tslint:disable-next-line:prefer-for-of
    for (let i = 0; i < allDays.length; i++) {
      // tslint:disable-next-line: triple-equals
      if (allDays[i].ATTENDED_FLAG == 'Y') {
        allDays[i].present = true;
        allDays[i].absent = false;
        allDays[i].daysOff = false;
        allDays[i].schedule = false;
        this.arrDaysAttendance.push({
          startTime: new Date(allDays[i].SCHEDULE_DATE),
          endTime: new Date(allDays[i].SCHEDULE_DATE)
        });
      // tslint:disable-next-line: triple-equals
      } else if (allDays[i].ATTENDED_FLAG == 'N' && allDays[i].ABSENT_FLAG == 'Y') {
        allDays[i].present = false;
        allDays[i].absent = true;
        allDays[i].daysOff = false;
        allDays[i].schedule = false;
        this.arrDaysAbsent.push({
          startTime: new Date(allDays[i].SCHEDULE_DATE),
          endTime: new Date(allDays[i].SCHEDULE_DATE),
          isoTime: '09:00:00',
          allDay: false
        });
      // tslint:disable-next-line: triple-equals
      } else if (allDays[i].ATTENDED_FLAG == 'N' && allDays[i].DAY_TYPE === 'OFF') {
        allDays[i].present = false;
        allDays[i].absent = false;
        allDays[i].daysOff = true;
        allDays[i].schedule = false;
        this.arrDaysOff.push({
          startTime: new Date(allDays[i].SCHEDULE_DATE),
          endTime: new Date(allDays[i].SCHEDULE_DATE)
        });
      } else {
        allDays[i].present = false;
        allDays[i].absent = false;
        allDays[i].daysOff = false;
        allDays[i].schedule = true;
        this.normalDays.push({
          startTime: new Date(allDays[i].SCHEDULE_DATE),
          endTime: new Date(allDays[i].SCHEDULE_DATE)
        });
      }
    }
    this.showData = true;
  }

  public getTimeCardSummaryDetails(month?, year?) {
    const timeCardSummaryReqObj = new GetTimeCardSummaryRequest();
    this.monthName = month;
    this.yearDate = year;

    this.selEmp = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_EMP, false);
    this.respID = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_RESP_ID, false);
    this.selMenu = this.common.sharedService.getSharedData(MenuResponse.SHARED_DATA, false);
    this.menuType = this.selMenu.List_Menu.MENU_TYPE;

    timeCardSummaryReqObj.P_SELECTED_EMPLOYEE_NUMBER = this.selEmp;
    timeCardSummaryReqObj.P_MENU_TYPE = this.menuType;
    timeCardSummaryReqObj.P_SELECTED_RESP_ID = this.respID;
    timeCardSummaryReqObj.SearchMonth = this.monthName;
    timeCardSummaryReqObj.SearchYear = this.yearDate;

    this.timeCardService.getTimeCardSummary(timeCardSummaryReqObj).subscribe((result) => {
      if (this.common.validResponse(result)) {

        this.timeCardSummaryData = result.GetTimeCardSummaryList[0];
        this.absentDays = this.timeCardSummaryData.ABSENT_DAYS;
        this.attendedDays = this.timeCardSummaryData.ATTENDED_DAYS;

        // this.totalAttendancePrecentage = this.timeCardSummaryData.PERIOD_DAYS - this.timeCardSummaryData.OFF_DAYS;
        // if (this.absentDays === 0 && this.attendedDays === 0) {
        //   this.futrueDays = this.totalAttendancePrecentage;
        // }
        this.totalAttendancePrecentage = this.absentDays + this.attendedDays;
        if (this.totalAttendancePrecentage > 0) {
          this.data = {
            datasets: [
              {
                data: [this.absentDays, this.attendedDays],
                backgroundColor: [
                  '#094875',
                  '#22c6b3'
                ],
                borderWidth: 2
              }]
          };
        }
      }
    });
  }


  nextSlide() {
    this.normalDays = [];
    if (this.currentMonthName !== this.month) {
        this.showData = false;
        if (this.nextMonth > 12) {
              this.currentYear = this.currentYear + 1;
              this.nextMonth = 1;
        }
        this.currentDate = new Date(this.currentYear, (this.nextMonth - 1), 1);
        this.calendarConfig(this.getMonthName(this.nextMonth) , this.currentYear);
        this.nextMonth = this.nextMonth + 1;
        this.preMonth = this.nextMonth - 2;
    }
  }

  previousSlide() {
    this.normalDays = [];
    this.showData = false;
    if (this.preMonth === 0) {
        this.currentYear = this.currentYear - 1;
        this.preMonth = 12;
    }
    this.currentDate = new Date(this.currentYear, (this.preMonth - 1), 1);
    console.log(this.currentDate);
    this.calendarConfig(this.getMonthName(this.preMonth) , this.currentYear);
    this.preMonth = this.preMonth - 1;
    this.nextMonth = this.preMonth + 2;
  }

  changeMonthTitle(title) {
    this.monthTitle = title;
    this.getTimeCardSummaryDetails();
  }

  changeYear(year) {
    this.yearTitle = year;
  }

  public getMonthName(value: any): any {
    switch (value) {
      case 1:
        return 'January';
      case 2:
        return 'February';
      case 3:
        return 'March';
      case 4:
        return 'April';
      case 5:
        return 'May';
      case 6:
        return 'June';
      case 7:
        return 'July';
      case 8:
        return 'August';
      case 9 :
        return 'September';
      case 10:
        return 'October';
      case 11:
        return 'November';
      case 12:
        return 'December';

    }
  }
}
