import { Component, OnDestroy, OnInit, ViewChild } 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 { MatDialog } from '@angular/material/dialog';


import Swal from 'sweetalert2';
import { CalendarService } from '../../../Administrador/services/calendar.service';
import { EventoServiceService } from '../../../Administrador/services/evento-service.service';




@Component({
  selector: 'app-calendar',
  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 calendarOptions: CalendarOptions = {
    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: false,
    selectable: true,
    selectMirror: true,
    dayMaxEvents: true,
    plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
    events: []
  };

  constructor(
    private calendarService: CalendarService,
    public dialog: MatDialog,
    private eventoService: EventoServiceService
  ) { }

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

  getEvents() {
    this.eventoService.obtenerEventos().subscribe((response: any) => {
      const events = response.map((event: any) => ({
        id: event.idEvento,
        title: event.titulo,
        start: new Date(event.fechaInicio).toISOString(),
        end: new Date(event.fechaFin).toISOString(),
        description: event.descripcion,
        backgroundColor: event.colorEvento,
        textColor: event.colorTexto || '#FFFFFF'
      }));

      this.calendarOptions.events = events;
      console.log(this.calendarOptions.events);


    });
  }

  
}