import { Component, OnInit } from '@angular/core';
import { CalendarOptions } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import timeGridPlugin from '@fullcalendar/timegrid'
import listPlugin from '@fullcalendar/list';
import { CalendarService } from '../../../Administrador/services/calendar.service';




@Component({
  selector: 'app-calendar-padres',
  templateUrl: './calendar.component.html',
  styleUrl: './calendar.component.css'
})
export class CalendarComponent implements OnInit {
  public valor: string = localStorage.getItem('vista') || '';
  public fecha: string = localStorage.getItem('dia') || '';
  public primerColorTitulos: string = '';
  public eventList: any;

  constructor(private calendarService: CalendarService) { }

  ngOnInit() {
    let primerColorTitulos = localStorage.getItem('primerColorTitulos') || ''
    this.primerColorTitulos = primerColorTitulos;
    this.getEvents();
  }

  sumarDias(fecha: Date, dias: number) {
    fecha.setDate(fecha.getDate() + dias);
    return fecha;
  }

  getEvents() {
    this.calendarService.allEvents().subscribe((response: any) => {
      const events = response.map((event: any) => ({
        id: event.id,
        title: event.title,
        start: this.sumarDias(new Date(event.start), 1).toISOString(),
        end: this.sumarDias(new Date(event.end), 1).toISOString(),

        // start: new Date(event.start),
        // end: new Date(event.end),
        description: event.description,
        eventBackgroundColor: event.color
      }));
      this.calendarOptions.events = events;
      console.log(this.calendarOptions.events);
    });
  }


  calendarOptions: CalendarOptions = {
    // windowResize: function (arg) {
    //   alert('The calendar has adjusted to a window resize. Current view: ' + arg.view.type);
    // },
    initialDate: this.fecha,
    locale: 'es',
    weekNumbers: true,
    weekText: '',
    buttonText: {
      today: 'Hoy',
      timeGridWeek: 'Semana',
      dayGridMonth: 'Mes',
      listWeek: 'Agenda',
      dayGridDay: 'Día'
    },
    headerToolbar: {

      start: 'today prev,next',
      center: 'title',
      end: 'dayGridMonth,timeGridWeek,dayGridDay,listWeek',
    },
    initialView: this.valor,
    navLinks: true,
    editable: true,
    selectable: true,
    selectMirror: true,
    dayMaxEvents: true,
    weekends: false,
    plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
    // dateClick: (arg) => this.handleDateClick(arg),
    events: [
      // {
      //   id: 'a',
      //   title: 'my event',
      //   start: '2024-06-01'
      // }
    ]
    
  };

  // handleDateClick(arg: any) {
  //   prompt('date click! ' + arg.dateStr)
  // }


};


