'use client'
import React, {useEffect} from "react";
import {Calendar, dayjsLocalizer, Event, View} from 'react-big-calendar'
// https://day.js.org/docs/zh-CN/get-set/get-set
import dayjs from 'dayjs'
import 'react-big-calendar/lib/css/react-big-calendar.css'
import {getTaskTreeResult} from "@/lib/task/project/data";
import {useSearchParams} from "next/dist/client/components/navigation";

/**
 * https://github.com/jquense/react-big-calendar?tab=readme-ov-file
 * @constructor
 */
const localizer = dayjsLocalizer(dayjs)
const CalShow: React.FC = () => {
    dayjs.locale('zh-cn')
    const [view, setView] = React.useState<View>('month');
    const [date, setDate] = React.useState<Date>(new Date());
    // 展示在页面的任务,默认获取当前月的信息。
    const [events,setEvents] = React.useState<Event[]>([]);
    const handleViewChange = (newView:View) => {
        setView(newView);
    };
    var pid = useSearchParams().get('pid');
    useEffect(() => {
        const searchListE=[]
        if (pid!=null) {
            searchListE.push({name:"pid",value:pid,operateType:"="},{name:'TREE',value:"false",operateType: "TREE"});
        }
        if (view==='month'){
            searchListE.push({name:'expectedStartTime',value:dayjs(date).startOf('month'),operateType:">="})
            searchListE.push({name:'expectedStartTime',value:dayjs(date).endOf('month'),operateType:"<="})
        }else {
            searchListE.push({name:'expectedStartTime',value:dayjs(date).startOf('week'),operateType:">="})
            searchListE.push({name:'expectedStartTime',value:dayjs(date).endOf('week'),operateType:"<="})
        }
        searchListE.push({name:'expectedEndTime',value:dayjs(date).endOf('month'),operateType:"NOT NULL"})
        let request = JSON.stringify({
            pageSize:9999,
            pageNumber:1,
            data: searchListE
        })
        const response = getTaskTreeResult(request)
        response.then(responseD=>{
            if(responseD.status.success){
                setEvents(responseD.data.content.map(taskState=>{
                    return {
                        start:dayjs(taskState.expectedStartTime).toDate(),
                        end:dayjs(taskState.expectedEndTime).toDate(),
                        title:taskState.name
                    }
                }))
            }
        })
    }, []);

    const handleNavigate = (newDate:Date) => {
        console.log('handleNavigate',newDate)
        setDate(newDate);
        const searchList=[]
        if (pid!=null) {
            searchList.push({name:"pid",value:pid,operateType:"="},{name:'TREE',value:"false",operateType: "TREE"});
        }
        searchList.push({name:'expectedStartTime',value:dayjs(newDate).startOf('month'),operateType:">="})
        searchList.push({name:'expectedStartTime',value:dayjs(newDate).endOf('month'),operateType:"<="})
        searchList.push({name:'expectedEndTime',value:dayjs(newDate).endOf('month'),operateType:"NOT NULL"})
        let request = JSON.stringify({
            pageSize:9999,
            pageNumber:1,
            data: searchList
        })
        const response = getTaskTreeResult(request)
        response.then(responseD=>{
            if(responseD.status.success){
                setEvents(responseD.data.content.map(taskState=>{
                    return {
                        start:dayjs(taskState.expectedStartTime).toDate(),
                        end:dayjs(taskState.expectedEndTime).toDate(),
                        title:taskState.name
                    }
                }))
            }
        })
    };

    return <div className="App" style={{ height: '90vh' }}>
        <Calendar
            localizer={localizer}
            events={events}
            view={view}
            onView={handleViewChange}
            // onRangeChange={rangeChange}
            date={date}
            onNavigate={handleNavigate}
        />
    </div>
}
export default CalShow;