import { Component, OnInit, Input, ViewChild } from '@angular/core';
import { ModalController, NavParams, IonInfiniteScroll } from '@ionic/angular';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
import { IonSlides } from '@ionic/angular';

@Component({
  selector: 'app-date-info-modal',
  templateUrl: './date-info-modal.component.html',
  styleUrls: ['./date-info-modal.component.scss'],
})
export class DateInfoModalComponent implements OnInit {
  @ViewChild('slides') slides: IonSlides;
  [x: string]: any;
  gaugeType = 'full';
  gaugeValue = 28.3;
  gaugeLabel = 'Days';
  @Input() TODAYDATE: any;
  @Input() SHIFTDETAILS: any;
  today: any;
  month: any;
  monthDate: any;
  excess: any;
  shortage: any;
  lateIn: any;
  scheduled: any;
  earlyOut: any;
  shiftTime: any;
  startDate: any;
  endDate: any;
  shift: any;
  percentage: any;
  data: any;
  scheduleDate: any;
  tests: any;
  year: any;
  nameMonth: any;
  nameDay: any;
  public weekDaysEn = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  public direction: string;
  public options = {
    cutoutPercentage: 85,
    tooltips: { enabled: false },
    legend: { display: false }
  };

  public slideOptsOne = {
    slidesPerView: 1,
    spaceBetween: 0
  };

  constructor(
    public modalController: ModalController,
    public navParams: NavParams,
    public ts: TranslatorService
    ) {
      this.direction = TranslatorService.getCurrentDirection();
     }

  ngOnInit() {
    console.log(this.TODAYDATE);
    this.excess = this.TODAYDATE.EXCESS_HRS;
    this.lateIn = this.TODAYDATE.LATE_IN_HRS;
    this.shortage = this.TODAYDATE.SHORTAGE_HRS;
    this.scheduled = this.TODAYDATE.SCHEDULED_HRS;
    this.earlyOut = this.TODAYDATE.EARLY_OUT_HRS ;
    this.scheduleDate = this.TODAYDATE.SCHEDULE_DATE;
    this.assignData(this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0]);
  }

  assignData(shiftDetails) {
    this.shiftTime = shiftDetails.SHT_NAME;
    this.startDate = shiftDetails.SHT_ACTUAL_START_TIME;
    this.endDate = shiftDetails.SHT_ACTUAL_END_TIME;
    this.percentage = shiftDetails.PERCENTAGE;
    this.percChart = this.percentage.substring(0, this.percentage.indexOf('%'));
    const test = this.scheduleDate;
    const splitdate = test.split(' ');
    const date = splitdate[0];
    const test1 = date.split('/');
    this.day = test1[1];
    this.year = test1[2];
    this.month = test1[0];

    // tslint:disable-next-line: radix
    this.nameMonth = this.getMonthName(parseInt(this.month));
    this.nameDay = this.getHeaderDay(new Date(date));
    const d = new Date(date);
    this.data = {
      labels: ['percentage'],
      datasets: [
        {
          data: [this.percChart],
          backgroundColor: [
            '#094875'
          ],
          borderWidth: 2
        }]
    };
  }

slideChanged(ev) {
  this.slides.getActiveIndex().then(index => {
    const shiftDetails = this.SHIFTDETAILS.GetScheduleShiftsDetailsList[index];
    this.assignData(shiftDetails);
  });
}

  public getMonthName(value: number): string {
    switch (value) {
      case 1:
        return 'Jan';
      case 2:
        return 'Feb';
      case 3:
        return 'Mar';
      case 4:
        return 'Apr';
      case 5:
        return 'May';
      case 6:
        return 'Jun';
      case 7:
        return 'Jul';
      case 8:
        return 'Aug';
      case 9:
        return 'Sep';
      case 10:
        return 'Oct';
      case 11:
        return 'Nov';
      case 12:
        return 'Dec';
    }
  }

  getHeaderDay(date: any) {
    return this.weekDaysEn[date.getDay()];
  }
}
