import { Component, OnInit, Output, Input, ViewChild, ElementRef, EventEmitter } from '@angular/core';
import { TimeSlot } from './time.slot';
import { SharedDataService } from '../../services/shared-data-service/shared-data.service';
import { ModalController } from '@ionic/angular';
import { DateInfoModalComponent } from './date-info-modal/date-info-modal.component';
import { MenuResponse } from '../../services/menu/models/menu-response';
import { CommonService } from '../../services/common/common.service';
import { TimeCardService } from 'src/app/time-card/service/time-card.service';
import { GetShiftDetailRequest } from 'src/app/time-card/service/models/get-shift-detail.request';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';

@Component({
  selector: 'app-circle-calendar',
  templateUrl: './circle-calendar.component.html',
  styleUrls: ['./circle-calendar.component.scss']
})
export class CircleCalendarComponent implements OnInit {
  @Input() dayHoursTypeDetailsList: any = [];
  @Input() currentDateParent: string;
  @Output() monthTitle = new EventEmitter();
  @Output() currentYear = new EventEmitter();

  public monthName: any;
  public yearDate: any;
  public selEmp: string;
  public selMenu: MenuResponse = new MenuResponse();
  public respID: number;
  public menuType: any;
  public dayAndHoursPageNumber = 1;
  public selectedFilters: any = {};
  public selectedShiftFilter: any;
  public arrDaysAttendance: any = [];
  public arrDaysAbsent: any = [];
  public arrDaysOff: any = [];
  public selectedShift: any;
  public shiftDetailsData: any = [];
  public swipeDetailsData: any = [];
  public arrOfAllList: any = [];
  eventsdata: any = [];

  public calendar = {
    mode: 'month',
    dateFormatter: {
      formatMonthViewDayHeader: (date: Date) => {
        return this.getHeaderDay(date);
      }

    }
  };

  public currentAvailableAppoDate: any;
  public eventsInput: any = [];
  public events: TimeSlot[] = [];
  public selectedTime: string;
  public selectedDate: string;
  public weekDaysEn = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  public weekDaysEnSort = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
  public weekDaysAr = ['الاحد', 'الاثنين', 'الثلاثاء', 'الاربعاء', 'الخميس', 'الجمعه', 'السبت'];
  public lockSwipeToPrev: any = true;
  public currentDate: any;
  public selectedDateObject: any;
  public currentDateToSwipe: any;
  public activeMonth: any;
  public isFirst = false;
  public selectedIndexData: any;
  arrFutrueDays: any;
  eventsdateFutrue: any;
  detailData: any;
  direction: string;
  constructor(
    public sharedData: SharedDataService,
    public mod: ModalController,
    public common: CommonService,
    public timeCardService: TimeCardService,
    public ts: TranslatorService) { }
  @ViewChild('slider') slides: ElementRef;

  ngOnInit() {
    // this.reRenderCalendar();
    this.direction = TranslatorService.getCurrentLanguageName();
  }

  // tslint:disable-next-line: use-life-cycle-interface
  ngAfterViewInit() {
    setTimeout(() => {
      this.reRenderCalendar();
    }, 1000);
  }

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

  reRenderCalendar() {
    this.renderDate(this.dayHoursTypeDetailsList);
  }

  public async dateModal(shiftDetails) {
    const modal = await this.mod.create({
      component: DateInfoModalComponent,
      showBackdrop: true,
      backdropDismiss: true,
      componentProps: {
        TODAYDATE: this.selectedIndexData,
        SHIFTDETAILS: shiftDetails
      }
    });
    modal.cssClass = 'calendar-modal';
    await modal.present();
  }

  public renderDate(arrayDays) {
    const td = document.querySelectorAll('.swiper-slide-active .monthview-datetable td:not(.text-muted)');
    arrayDays.forEach(dateObj => {
      const date = dateObj.customScheduleDate;
      td.forEach(element => {
        // tslint:disable-next-line: triple-equals
        if (date.getDate() == element.textContent.trim() && dateObj.customPresent === true) {
          element.classList.add('present');
        // tslint:disable-next-line: triple-equals
        } else if (date.getDate() == element.textContent.trim() && dateObj.customAbsent === true) {
          element.classList.add('absent');
        // tslint:disable-next-line: triple-equals
        } else if (date.getDate() == element.textContent.trim() && dateObj.customDaysOff === true) {
          element.classList.add('dayoff');
        // tslint:disable-next-line: triple-equals
        } else if (date.getDate() == element.textContent.trim() && dateObj.customSchedule === true) {
          element.classList.add('scheduleDay');
        }
      });
    });
    this.common.stopLoading();
  }

  onDayClicked(event) {
    if (this.isFirst) {
      console.log(event.selectedTime.getDate());
      const selectedIndex = event.selectedTime.getDate();
      this.selectedIndexData = this.dayHoursTypeDetailsList[selectedIndex - 1];
      if (this.selectedIndexData.customPresent) {
        const rtpID = this.selectedIndexData.RTP_ID;
        this.getScheduleShiftDetails(rtpID);
      }
    } else {
      this.isFirst = true;
    }
  }

  getScheduleShiftDetails(RTP_ID) {
    const GetShiftDetailRequestObject = new GetShiftDetailRequest();
    GetShiftDetailRequestObject.P_RTP_ID = RTP_ID;
    GetShiftDetailRequestObject.P_PAGE_NUM = 1;
    GetShiftDetailRequestObject.P_PAGE_LIMIT = 10;
    this.timeCardService.getShiftDetail(GetShiftDetailRequestObject).subscribe((result) => {
      if (this.common.validResponse(result)) {
        console.log(result);
        this.shiftDetailsData = result.GetScheduleShiftsDetailsList;
        this.dateModal(result);
      }
    });
  }
}
