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 { CalendarService } from '../../services/calendar.service';
import { MatDialog } from '@angular/material/dialog';
import { provideNativeDateAdapter } from '@angular/material/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Editor, Toolbar } from 'ngx-editor';
import { forkJoin } from 'rxjs';
import { NivelEducativoService } from '../../services/nivel-educativo.service';
import { GradosEducativosService } from '../../services/grados-educativos.service';
import { GruposService } from '../../services/grupos.service';
import { MateriaService } from '../../services/materia.service';
import moment from 'moment';
import { EventoServiceService } from '../../services/evento-service.service';
import { CircularService } from '../../services/circular.service';
import Swal from 'sweetalert2';




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


    });
  }

  openDialog() {
    this.dialog.open(ModalEvent, {
      autoFocus: false
    });
  }
}

@Component({
  selector: 'dialog-content-example-dialog',
  templateUrl: 'modalEvent.component.html',
  styleUrl: './calendar.component.css',
  providers: [provideNativeDateAdapter()],
})

export class ModalEvent implements OnInit, OnDestroy {
  editor!: Editor;
  toolbar: Toolbar = [
    ['bold', 'italic'],
    ['underline', 'strike'],
    ['code', 'blockquote'],
    ['ordered_list', 'bullet_list'],
    [{ heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] }],
    ['link', 'image'],
    ['text_color', 'background_color'],
    ['align_left', 'align_center', 'align_right', 'align_justify'],
  ];
  colorPresets = [
    "#000000", // Negro
    "#FF0000", // Rojo
    "#00FF00", // Verde
    "#0000FF", // Azul
    "#FFFF00", // Amarillo
    "#FF00FF", // Magenta
    "#00FFFF", // Cian
    "#808080", // Gris
    "#FFFFFF", // Blanco
    "#800000", // Marrón
    "#008000", // Verde oscuro
    "#000080", // Azul oscuro
    "#808000", // Oliva
    "#800080", // Púrpura
    "#008080", // Verde azulado
    "#C0C0C0"  // Plata

  ];


  ngOnInit(): void {
    this.editor = new Editor();
  }

  ngOnDestroy(): void {
    this.editor.destroy();
  }

  public horasDelDia: any = this.generarHorasDelDia();
  public catEventos = [
    { value: '#6BD716', text: 'Cumpleaños' },
    { value: '#f50f39', text: 'Exámenes' },
    { value: '#F50F9E', text: 'Talleres' },
    { value: '#F5890F', text: 'Académico' },

  ]
  // public hoy = new Date();
  constructor(public dialog: MatDialog,
    private nivelService: NivelEducativoService,
    private gradoService: GradosEducativosService,
    private grupoService: GruposService,
    private materiaService: MateriaService,
    private eventoService: EventoServiceService,
    private circularService: CircularService
  ) {
    this.lista();
  }

  public form = new FormGroup({
    titulo: new FormControl<string>('', Validators.required),
    fechaInicio: new FormControl<any>('', Validators.required),
    horaInicio: new FormControl<any>('', Validators.required),
    fechaFin: new FormControl<any>(''),
    horaFinal: new FormControl<any>(''),
    todoDia: new FormControl<boolean>(false),
    categoria: new FormControl<string>(''),
    contenido: new FormControl<string>(''),
    destinos: new FormControl<string>(''),
    audiencia: new FormControl<string>(''),
  })

  public opciones: any[] = [];
  public opciones1: any[] = [];

  public eventsCalendar: any[] = [];

  audiencia = [
    { value: 'AL', audiencia: 'Alumnos' },
    { value: 'PF', audiencia: 'Padre de Familia' },
    { value: 'AD', audiencia: 'Administradores' },
    { value: 'PR', audiencia: 'Profesores' },
  ];

  onTodoDiaChange(event: any): void {
    const today = new Date(); // Obtiene la fecha de hoy en formato Date

    if (event.checked) {
      console.log('El checkbox "Todo el día" ha sido seleccionado.');
      // Establece la fecha de hoy en los inputs de fechaInicio y fechaFin
      this.form.get('fechaInicio')?.setValue(today);
      this.form.get('fechaFin')?.setValue(today);
      this.form.get('horaInicio')?.setValue('00:00:00');
      this.form.get('horaFinal')?.setValue('23:30:00');

      // Deshabilita los campos de hora
      this.form.get('fechaInicio')?.disable();
      this.form.get('fechaFin')?.disable();
      this.form.get('horaInicio')?.disable();
      this.form.get('horaFinal')?.disable();
    } else {
      console.log('El checkbox "Todo el día" ha sido deseleccionado.');
      // Habilita los campos de hora

      this.form.get('fechaInicio')?.setValue('');
      this.form.get('fechaFin')?.setValue('');
      this.form.get('horaInicio')?.setValue('');
      this.form.get('horaFinal')?.setValue('');

      this.form.get('fechaInicio')?.enable();
      this.form.get('fechaFin')?.enable();
      this.form.get('horaInicio')?.enable();
      this.form.get('horaFinal')?.enable();
    }
  }

  lista() {
    forkJoin({
      niveles: this.nivelService.getHabilitados(),
      grados: this.gradoService.getHabilitados(),
      grupos: this.grupoService.getHabilitados(),
      materias: this.materiaService.getHabilitados(),
    }).subscribe(({ niveles, grados, grupos, materias }: any) => {
      this.opciones = [
        {
          name: 'Nivel Educativo',
          grupo: niveles.map((nivel: any) => ({
            value: [nivel.idNivel, 'NivelEducativo'],
            viewValue: nivel.nombreNivel,
          })),
        },
        {
          name: 'Grados',
          grupo: grados.map((grado: any) => ({
            value: [grado.nombreGrado, 'Grado'],
            viewValue: grado.nombreGrado,
          })),
        },
        {
          name: 'Grupos',
          grupo: grupos.map((grupo: any) => ({
            value: [grupo.idGrupo, 'Grupo'],
            viewValue: grupo.nombreGrupo,
          })),
        },
        {
          name: 'Materia',
          grupo: materias.map((materia: any) => ({
            value: [materia.idMateria, 'Materias'],
            viewValue: materia.nombreMateria,
          })),
        },
      ];

    });
  }

  onAudienciaChange(value: string) {
    console.log(this.opciones1);
    let extra = {};

    switch (value) {
      case 'AL':
        extra = {
          name: 'Alumnos',
          grupo: [
            { value: ['AL', 'todos'], Destino: 'todos', viewValue: 'Todos los Alumnos' }
          ]
        };
        this.opciones1 = [extra, ...this.opciones];
        break;
      case 'PF':
        extra = {
          name: 'Padres de Familia',
          grupo: [
            { value: ['PF', 'todos'], Destino: 'todos', viewValue: 'Todos los Padres de Familia' }
          ]
        };
        this.opciones1 = [extra, ...this.opciones];
        break;
      case 'AD':
        extra = {
          name: 'Administradores',
          grupo: [
            { value: ['AD', 'todos'], Destino: 'todos', viewValue: 'Todos los Administradores' }
          ]
        };
        this.opciones1 = [extra];
        break;
      case 'PR':
        extra = {
          name: 'Profesores',
          grupo: [
            { value: ['PR', 'todos'], Destino: 'todos', viewValue: 'Todos los Profesores' }
          ]
        };

        this.opciones1 = [extra, ...this.opciones];
        break;
      default:
        console.warn('Opción no reconocida:', value);
        return;
    }



  }


  private arrayIdDestinatarios: any;
  crearEvento() {

    console.log(this.form.value);
    const formattedFechaInicio = moment(this.form.value.fechaInicio).format("YYYY-MM-DD");
    const formattedFechaFinal = moment(this.form.value.fechaFin).format("YYYY-MM-DD");
    const horaInicio = this.form.value.horaInicio || '00:00:00'; // Valor por defecto
    const horaFinal = this.form.value.horaFinal || '23:30:00';

    const formattedData = {
      ...this.form.value,
      objeto: {
        Audiencia: this.form.value.audiencia,
        Destino: this.form.value.destinos?.[1] ?? '',
        id: this.form.value.destinos?.[0] ?? '',

      },
      fechaInicio: `${formattedFechaInicio} ${horaInicio}`,
      fechaFin: `${formattedFechaFinal} ${horaFinal}`,
    }

    this.circularService.obtenerDestinatarios(formattedData.objeto).subscribe((response: any) => {
      // Eliminar duplicados del array
      console.log(response);
      this.arrayIdDestinatarios = [...new Set(response.idUsuario)];
      console.log(this.arrayIdDestinatarios);
    });

    console.log(formattedData);

    this.eventoService.crearEvento(formattedData).subscribe(
      (response: any) => {
        console.log(response);
        console.log(this.arrayIdDestinatarios);

        // Iterar sobre los destinatarios y guardar en el calendario
        this.arrayIdDestinatarios.forEach((element: any) => {
          this.eventoService.savecalendarioUsuarios({ idEvento: response.idEvento, idUsuario: element }).subscribe(
            (response1) => {
              console.log(response1);
            },
            (error) => {
              console.log(error);
            }
          );
        });

        // Mostrar alerta de éxito
        Swal.fire({
          icon: 'success',
          title: 'Evento creado',
          text: 'El evento se ha creado y asignado correctamente.',
          confirmButtonText: 'Aceptar'
        });
        
        // Opcional: Resetear el formulario y cerrar el diálogo
        this.form.reset();
        this.dialog.closeAll();
        // timeout para recargar la página
        setTimeout(() => {
          this.dialog.closeAll();
        }, 2000);

      },
      (error) => {
        console.error(error.error);

        // Mostrar alerta de error
        Swal.fire({
          icon: 'error',
          title: 'Error',
          text: 'Ocurrió un error al crear el evento. Por favor, inténtalo de nuevo.',
          confirmButtonText: 'Aceptar'
        });
      }
    );

  }

  generarHorasDelDia(): { hora24: string, hora12: string }[] {
    const horas: { hora24: string, hora12: string }[] = [];
    let hora: number = 0;
    let minutos: number = 0;

    for (let i = 0; i < 48; i++) {
      let ampm = 'am';
      let hora12: number = hora;

      if (hora === 0) {
        hora12 = 12;
      } else if (hora === 12) {
        ampm = 'pm';
      } else if (hora > 12) {
        hora12 = hora - 12;
        ampm = 'pm';
      }

      const horaFormateada24 = `${hora.toString().padStart(2, '0')}:${minutos.toString().padStart(2, '0')}:00`;
      const horaFormateada12 = `${hora12.toString().padStart(2, '0')}:${minutos.toString().padStart(2, '0')} ${ampm}`;

      horas.push({ hora24: horaFormateada24, hora12: horaFormateada12 });

      minutos += 30;
      if (minutos === 60) {
        minutos = 0;
        hora++;
      }
    }

    return horas;
  }






}
