import { Component, OnInit, ViewChild, ChangeDetectionStrategy } 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";
import { format } from "date-fns";
import { of } from 'rxjs';
@Component({
    selector: "farris-doc-calendar",
    templateUrl: "./calendar-demo.component.html",
    styleUrls: ["./calendar-demo.component.scss"],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class CalendarDemoComponent implements OnInit {
    @ViewChild("calendar") calendar1Component: CalendarComponent; // the #calendar in the template
    @ViewChild("calendar2") calendar2Component: CalendarComponent; // the #calendar in the template
    dataSource: any[] = [
        {
            propertiy: "[header]",
            default: "<ToolbarInput>",
            type: "boolean | ToolbarInput",
            description: "设置头部信息，如果不想显示，可以设置header为false"
        },
        {
            propertiy: "[customButtons]",
            default: "null",
            type: "{ [name: string]: CustomButtonInput }",
            description: "自定义工具栏按钮"
        },
        {
            propertiy: "[buttonIcons]",
            default: "false",
            type: "boolean | ButtonIconsInput",
            description: "设置工具栏中使用的prev, next等变量对应按钮的样式"
        },
        {
            propertiy: "[themeSystem]",
            default: "standard",
            type: '"standard" | string',
            description: "使用的主题系统"
        },
        {
            propertiy: "[firstDay]",
            default: "1",
            type: "number",
            description: "设置一周中显示的第一天是哪天，周日是0，周一是1，类推"
        },
        {
            propertiy: "[weekends]",
            default: "true",
            type: "boolean",
            description: "设置是否显示周六和周日，设为false则不显示"
        },
        {
            propertiy: "[hiddenDays]",
            default: "[]",
            type: "number[]",
            description:
                "隐藏一周中的某一天或某几天，数组形式，如隐藏周二和周五：[2,5]，默认不隐藏，除非weekends设置为false"
        },
        {
            propertiy: "[weekNumbers]",
            default: "false",
            type: "boolean",
            description:
                "是否在日历中显示周次(一年中的第几周)，如果设置为true，则会在月视图的左侧、周视图和日视图的左上角显示周数"
        },
        {
            propertiy: "[height]",
            default: "",
            type: 'number | "auto" | "parent" | (() => number)',
            description:
                "设置日历的高度，包括header日历头部，默认未设置，高度根据aspectRatio值自适应。"
        },
        {
            propertiy: "[aspectRatio]",
            default: "",
            type: "number",
            description: "月视图下日历格子宽度和高度的比例。"
        },
        {
            propertiy: "[events]",
            default: "",
            type: "EventSourceInput",
            description: "日程数据。"
        },
        {
            propertiy: "[eventSources]",
            default: "[]",
            type: "EventSourceInput[]",
            description: "指定多个事件源的方法。"
        },
        {
            propertiy: "[plugins]",
            default: "[]",
            type: "(PluginDef | string)[]",
            description: "指定插件。"
        }
    ];
    config: OptionsInput = {
        header: {
            right: "dayGridMonth"
        },
        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]
    };
    calendarVisible = true;
    calendarWeekends = true;
    calendarEvents: EventInput[] = [{ title: "Event Now", start: new Date() }];
    calendarEvents2: EventInput[] = [];
    ngOnInit(): void {}

    tabChange() {
        // setTimeout(()=> {
        //     // 解决多页时日历高度为0的问题
        //     this.calendar2Component.getApi().render();
        // }, 0)
    }
    toggleVisible() {
        this.calendarVisible = !this.calendarVisible;
    }

    toggleWeekends() {
        this.calendarWeekends = !this.calendarWeekends;
    }

    gotoPast() {
        const calendarApi = this.calendar1Component.getApi();
        calendarApi.gotoDate("2000-01-01"); // call a method on the Calendar object
    }

    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);
    }
    handleDatesRender(event: any) {
        setTimeout(() => {
            this.calendarEvents2 = [
                {
                    title: "isDay",
                    start: '2019-12-11',
                    // 以背景色方式 渲染日程数据
                    rendering: "background",
                    color: "#e4a5a5"
                },
                {
                    title: "now",
                    start: '2019-12-11',
                    color: "#e4a5a5"
                }
            ];
        }, 0)
    }
    handleViewRender(evnet) {
        const { activeStart, activeEnd } = evnet.view;
        console.log(activeStart, activeEnd);
    }
    getEvents() {
        console.log('11')
        return of([{ title: "Event Now", start: new Date() }, { title: "Event Now", start: new Date('2019-12-12') }]);
        // return [{ title: "Event Now", start: new Date() }, { title: "Event Now", start: new Date('2019-12-12') }];
    }
    set events(v) {

    }
    get events(): any {
        console.log('11')
        return [{ title: "Event Now", start: new Date() }, { title: "Event Now", start: new Date('2019-12-12') }]
    }
}