import { Component, OnInit, ViewChild } from '@angular/core';
import { OptionsInput, EventInput } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGrigPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import { CalendarComponent } from '@farris/ui-calendar';

@Component({
    selector: 'farris-doc-calendar',
    templateUrl: './calendar-demo.component.html',
    styleUrls: ['./calendar-demo.component.scss']
})
export class CalendarDemoComponent implements OnInit {
    @ViewChild('calendar') calendarComponent: CalendarComponent; // the #calendar in the template
    config: OptionsInput = {
        header: {
            left: 'prev,next, today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
        },
        navLinks: true, // can click day/week names to navigate views
        editable: true,
        selectable: true,
        defaultView: 'dayGridMonth',
        eventLimit: true, // allow "more" link when too many events
        plugins: [dayGridPlugin, timeGrigPlugin, interactionPlugin]
    }
    calendarEvents: EventInput[] = [{ title: 'Event Now', start: new Date() }];
    ngOnInit(): void {}

    handleDateClick(arg: any) {
        if (confirm('Would you like to add an event to ' + arg.dateStr + ' ?')) {
            this.calendarEvents = this.calendarEvents.concat({
                // add new event data. must create new array
                title: 'New Event',
                start: arg.date,
                allDay: arg.allDay
            });
        }
    }
    handleSelect(event: any) {
        console.log(event);
        console.log('↓↓↓select↓↓↓');
        console.log('start:' + event.startStr + '|end:' + event.endStr);
        const title = prompt('Event Title:');
        if (title) {
            this.calendarEvents = this.calendarEvents.concat({
                // add new event data. must create new array
                title,
                start: event.startStr,
                end: event.endStr
            });
        }
    }
    handleUnSelect(event: any) {
        console.log(event);
    }
    handleEventClick(event: any) {
        console.log(event);
    }
}