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';
import { CommonService } from 'src/app/hmg-common/services/common/common.service';

@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;
  year: any;
  nameMonth: any;
  nameDay: any;
  public weekDaysEn = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  public weekDaysAr = ['الاحد', 'الاثنين', 'الثلاثاء', 'الاربعاء', 'الخميس', 'الجمعه', 'السبت'];
  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,
    public common: CommonService
    ) {
      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.earlyOut = this.TODAYDATE.EARLY_OUT_HRS ;
    this.scheduleDate = this.TODAYDATE.SCHEDULE_DATE;
    this.assignData(this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0]);
  }

  assignData(shiftDetails) {
    this.scheduled = shiftDetails.SHT_TYPE_DESC;
    this.shiftTime = shiftDetails.SHT_NAME;
    this.actualCheckIn = shiftDetails.SHT_ACTUAL_START_TIME;
    this.actualCheckOut = shiftDetails.SHT_ACTUAL_END_TIME;
    this.approvedCheckIn = shiftDetails.APPROVED_START_TIME;
    this.approvedCheckOut = shiftDetails.APPROVED_END_TIME;
    this.percentage = shiftDetails.PERCENTAGE;
    this.percChart = this.percentage.substring(0, this.percentage.indexOf('%'));
    // const test = this.scheduleDate;
    const splitdate = this.scheduleDate.split(' ');
    const date = splitdate[0];
    const localDate = date.split('/');
    this.day = localDate[1];
    this.year = localDate[2];
    // tslint:disable-next-line: radix
    this.month = parseInt(localDate[0]) + 1;
    this.nameMonth = this.direction === 'ltr' ? this.common.getMonthName(this.month) : this.common.getMonthNameAr(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);
  });
}

  getHeaderDay(date: any) {
    if (this.direction === 'ltr') {
      return this.weekDaysEn[date.getDay()];
    } else {
      return this.weekDaysAr[date.getDay()];
    }
  }
}
