import { AfterViewInit, Component, effect, ElementRef, inject, OnInit, signal, ViewChild } from '@angular/core';
import { FullCalendarComponent, FullCalendarModule } from '@fullcalendar/angular';
import { CalendarOptions, EventInput } from '@fullcalendar/core';

import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import interactionPlugin from '@fullcalendar/interaction';
import { Modal } from '@rschneider/ng-daisyui';
import { CreateEventForm } from '../create-event-form/create-event-form';
import { CalendarService } from '../../services/calendar.service';
import { CalendarEventDto, EventsInRangeDTO } from '../../models/events-in-range-dto.model';
import { map } from 'rxjs';
import { SingleEventDashboard } from './single-event-dashboard/single-event-dashboard';
import { JsonPipe } from '@angular/common';

@Component({
  selector: 'app-calendar-view',
  imports: [FullCalendarModule, Modal, CreateEventForm, SingleEventDashboard, JsonPipe],
  templateUrl: './calendar-view.html',
  styleUrl: './calendar-view.css',
})
export class CalendarView implements OnInit, AfterViewInit {

  @ViewChild('startHour') startHour!: ElementRef;
  @ViewChild('calendar') calendarComponent: FullCalendarComponent | undefined;

  calendarService = inject(CalendarService);

  workflow = signal<string>('');
  selectedDate = signal<Date|undefined>(undefined);
  selectedEvent = signal<CalendarEventDto|undefined>(undefined)

  calendarOptions: CalendarOptions;

  constructor() {

    this.calendarOptions = {
      plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
      initialView: 'dayGridMonth',
      weekends: true,
      firstDay: 1,
      headerToolbar: {
        left: 'prev,next,today',
        center: 'title',
        right: 'dayGridMonth,dayGridWeek,dayGridDay,timeGridWeek,timeGridDay,listWeek',

      },
      events: this.fetchEvents.bind(this), // Bind the context

      eventClick: (info) => {
        this.selectedEvent.set(info.event.extendedProps['event']);
        this.workflow.set('event-dashboard');
      },

      dateClick: (info) => {
        console.info('create new evet for day ',info);
        this.workflow.set('create');
        this.selectedDate.set(info.date);
        this.selectedEvent.set(undefined);
      },

    };

  }

  fetchEvents(fetchInfo: any, successCallback: (events: EventInput[]) => void, failureCallback: (error: any) => void): void {

    console.info('fetching events', fetchInfo);
    const start = fetchInfo.start;
    const end = fetchInfo.end;
    // if ( fetchInfo ){
    //   console.info("fetchinfo", fetchInfo);
    //   successCallback([]);
    //   return;
    // }
    this.calendarService.getEventsInRange({
      startTime: start,
      endTime: end,
    })
      .pipe(
        map(value => {
          console.info("vent got"  , value );
          const events: EventInput[] = value.map( (model) => {
            const calendarEvent: EventInput = {
              start: new Date(model.startTime),
              // end: model.end_time,
              title: model.title,
              extendedProps: {
                event:  model
              }
            };
            if ( model.eventType){
              calendarEvent.borderColor = model.eventType.color;
            }
            // calendarEvent.backgroundColor = "#00ff00"
            return calendarEvent;
          })
          return events;
        }),
      )
      .subscribe({
          next: (events) => {
          console.info("calendar events", events);
            successCallback(events);
          }
          ,
          error: (error) => {
            console.error('Error fetching events', error);
            failureCallback(error);
          },
        },
      );
  }

  ngAfterViewInit(): void {

  }

  ngOnInit(): void {

  }

  protected addEvent($event: PointerEvent) {
    let hourStr = this.startHour.nativeElement.value;
    const hour = parseInt(hourStr, 10);
    const date = new Date();
    const start = new Date(date.getTime());
    start.setHours(hour, 0, 0);
    const end = new Date(date.getTime());
    // end.setHours(3,0,0)

    this.calendarComponent?.getApi().addEvent({
      title: 'Event at ' + hour,
      start,
    });
  }

  closeDialog() {
    this.workflow.set('');
  }
}