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 * as moment from 'moment';
import { CommonService } from '../../services/common/common.service';
import { GetDayAndHoursDetailsRequest } from 'src/app/time-card/service/models/get-day-hours-type-details.request';
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 { GetSwipesRequest } from 'src/app/time-card/service/models/get-swipes-request';

@Component({
  selector: 'app-circle-calendar',
  templateUrl: './circle-calendar.component.html',
  styleUrls: ['./circle-calendar.component.scss']
})
export class CircleCalendarComponent implements OnInit {

  @Input() eventsdateDayOff: any = [];
  @Input() eventsdateAttend: any = [];
  @Input() eventsdateAbsent: any = [];
  @Input() normalDays: any = [];
  @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'
  };

  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 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;
  constructor(
    public sharedData: SharedDataService,
    public mod: ModalController,
    public common: CommonService,
    public timeCardService: TimeCardService) { }
  @ViewChild('slider') slides: ElementRef;

  ngOnInit() {
    this.reRenderCalendar();
    console.log(this.currentDateParent);
  }

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

  reRenderCalendar() {
    this.renderDate(this.eventsdateAbsent, 'absent');
    this.renderDate(this.eventsdateAttend, 'present');
    this.renderDate(this.eventsdateDayOff, 'dayoff');
    this.renderDate(this.normalDays, 'scheduleDay');
  }

  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, cssClass) {
    const td = document.querySelectorAll('.swiper-slide-active .monthview-datetable td:not(.text-muted)');
    arrayDays.forEach(dateObj => {
      const date = dateObj.startTime;
      td.forEach(element => {
        // tslint:disable-next-line: triple-equals
        if (date.getDate() == element.textContent.trim()) {
          element.classList.add(cssClass);
        }
      });
    });
  }

  onDayClicked(event) {
    if (this.isFirst) {
      console.log(event.selectedTime.getDate());
      const selectedIndex = event.selectedTime.getDate();
      this.selectedIndexData = this.dayHoursTypeDetailsList[selectedIndex - 1];
      if (this.selectedIndexData.present) {
        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);
      }
    });
  }
}
