import { Component, Inject, 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 { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
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: [],
    eventClick: this.handleEventClick.bind(this)
  };



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

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

  handleEventClick(info: any) {
    const event = info.event;
    this.dialog.open(EventInfoModal, {
      width: '500px',
      data: {
        title: event.title,
        description: event.extendedProps.description,
        start: event.start,
        end: event.end,
        color: event.backgroundColor,
        textColor: event.textColor
      }
    });
  }

  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);


    });
  }

  
}

@Component({
  selector: 'app-event-info-modal',
  template: `
  <h2 mat-dialog-title [style.color]="data.color">{{ data.title }}</h2>
  <mat-dialog-content>
    <p [innerHTML]="data.description || 'Sin descripción disponible.'"></p>
    <p><strong>Inicio:</strong> {{ data.start | date: 'medium' }}</p>
    <p><strong>Fin:</strong> {{ data.end | date: 'medium' }}</p>
  </mat-dialog-content>
  <mat-dialog-actions align="end">
    <button mat-button mat-dialog-close color="primary">Cerrar</button>
  </mat-dialog-actions>
  `,
})
export class EventInfoModal {
  constructor(
    public dialogRef: MatDialogRef<EventInfoModal>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {}
}