import { Controller } from '@hotwired/stimulus';
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';


/* stimulusFetch: 'lazy' */
export default class extends Controller {
    calendar = null;

    initialize() {

    }

    connect() {
        this.calendar = new Calendar(this.element, {
            plugins: [ dayGridPlugin, timeGridPlugin ],
            initialView: 'dayGridMonth',
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay'
            },
            editable: true, // Allow events to be dragged and resized
            events: '/api/events', // Symfony route to fetch events
            eventDrop: function(info) {
                // Handle event drop (e.g., update event in database via AJAX)
            },
            eventResize: function(info) {
                // Handle event resize (e.g., update event in database via AJAX)
            }
        });
        this.calendar.render();
        // this.calendar = new Calendar(this.element, {
        //     plugins: [ dayGridPlugin, timeGridPlugin, listPlugin ],
        //     initialView: 'dayGridMonth',
        //     headerToolbar: {
        //         left: 'prev,next today',
        //         center: 'title',
        //         right: 'dayGridMonth,timeGridWeek,listWeek'
        //     }
        // });
        // this.calendar.render();
        // calendar.render();
    }

    // Add custom controller actions here
    // fooBar() { this.fooTarget.classList.toggle(this.bazClass) }

    disconnect() {
        // Called anytime its element is disconnected from the DOM
        // (on page change, when it's removed from or moved in the DOM, etc.)

        // Here you should remove all event listeners added in "connect()" 
        // this.fooTarget.removeEventListener('click', this._fooBar)
    }
}