import { NgxSpinnerService } from 'ngx-spinner';
import { InternalPageService } from './../../shared/internal-page.service';
//import localeAr from '@angular/common/locales/ar-SA';
import { registerLocaleData } from '@angular/common';

//registerLocaleData(localeAr, 'ar');

import { Component, OnInit,
          ChangeDetectionStrategy,
          ViewChild,
          TemplateRef } from '@angular/core';

import {
  startOfDay,
  endOfDay,
  subDays,
  addDays,
  endOfMonth,
  isSameDay,
  isSameMonth,
  addHours
} from 'date-fns';

import { Subject } from 'rxjs';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import {
  CalendarEvent,
  CalendarEventAction,
  CalendarEventTimesChangedEvent,
  CalendarView
} from 'angular-calendar';
const colors: any = {
  red: {
    primary: '#ad2121',
    secondary: '#FAE3E3'
  },
  blue: {
    primary: '#1e90ff',
    secondary: '#D1E8FF'
  },
  yellow: {
    primary: '#e3bc08',
    secondary: '#FDF1BA'
  }
};

@Component({
  selector: 'app-events',
  templateUrl: './events-date.component.html',
  styleUrls: ['./events-date.component.css']
})
export class EventsDateComponent implements OnInit {
  events: CalendarEvent[] = [] ;
  refresh: Subject<any> = new Subject();
  dataLecture: any;
  showDetailsEvent:boolean = false;

  constructor(private modal: NgbModal, 
    private internalService: InternalPageService, 
    private spinner:NgxSpinnerService) {

}
  ngOnInit() {
    this.spinner.show();
    this.loadEvents();
    this.refresh.next();
    console.log("dddddddd"+new Date())
  }

  loadEvents(): void {
    this.internalService.getEventNow().subscribe(
      (responce) => {
        for(var i =0;i < responce['lectures'].length;i++){
              let event: any={};
              event['start'] = new Date(responce['lectures'][i].start);
              event['end'] = new Date(responce['lectures'][i].end);
              event['title'] = responce['lectures'][i].title;
              event['description'] = responce['lectures'][i].description;
              event['description_en'] = responce['lectures'][i].description_en;
              this.events.push(event)
          }
          this.dayClicked({ date: new Date(), events: this.events });
          this.spinner.hide();
      },
      (error) => {
        console.log(error);
      }
    );
  }


  @ViewChild('modalContent')
    modalContent: TemplateRef<any>;

    view: CalendarView = CalendarView.Month;

    CalendarView = CalendarView;

    viewDate: Date = new Date();

    modalData: {
      action: string;
      event: CalendarEvent;
    };





    activeDayIsOpen: boolean = true;



    dayClicked({ date, events }: { date: Date; events: CalendarEvent[] }): void {
      console.log(date)

      if (isSameMonth(date, this.viewDate)) {
        this.viewDate = date;
        if (
          (isSameDay(this.viewDate, date) && this.activeDayIsOpen === true) ||
          events.length === 0
        ) {
          this.activeDayIsOpen = false;
        } else {
          this.activeDayIsOpen = true;
        }
      }
    }


    handleEvent(ssss,event) {
      this.showDetailsEvent = true;
      console.log(ssss , event);
      this.dataLecture = event;
      console.log('dataaaaaa lectrueeeeee',this.dataLecture);
    }

    closeDetailEvent() {
      this.showDetailsEvent = false;
    }

  




}
