import { Component, OnInit, ViewEncapsulation } from '@angular/core'
import { OptionsInput } from '@fullcalendar/core'
import dayGridPlugin from '@fullcalendar/daygrid'

@Component({
    selector: 'farris-doc-html-editor',
    templateUrl: './quick-start.component.html',
    styleUrls: ['./quick-start.component.scss'],
    encapsulation: ViewEncapsulation.None
})
export class QuickStartComponent implements OnInit {
    number = 21
    time = '21:21'
    options: OptionsInput
    eventsModel: any

    constructor() {}

    ngOnInit() {
        this.options = {
            editable: true,
            customButtons: {
                myCustomButton: {
                    text: 'custom!',
                    click: function() {
                        alert('clicked the custom button!')
                    }
                }
            },
            header: {
                left: 'prev,next today myCustomButton',
                center: 'title',
                right: 'dayGridMonth'
            },
            plugins: [dayGridPlugin]
        }
    }
    onChange(e) {
        console.log(e)
    }
    formatterPercent = (value: number) => `$ ${value}`
    parserPercent = (value: string) => value.replace('$ ', '')
    eventClick(model) {
        console.log(model)
    }
    eventDragStop(model) {
        console.log(model)
    }
    dateClick(model) {
        console.log(model)
    }
    updateHeader() {
        this.options.header = {
            left: 'prev,next myCustomButton',
            center: 'title',
            right: ''
        }
    }
    updateEvents() {
        this.eventsModel = [
            {
                title: 'Updaten Event',
                start: this.yearMonth + '-08',
                end: this.yearMonth + '-10'
            }
        ]
    }
    get yearMonth(): string {
        const dateObj = new Date()
        return dateObj.getUTCFullYear() + '-' + (dateObj.getUTCMonth() + 1)
    }
    tabChange() {}
}