/**
 * A layout is UI that is shared between multiple routes. On navigation, layouts preserve state, remain interactive, and do not re-render.
 */
'use client'
import React, { useState} from 'react';
import {DragDropContext, DropResult} from 'react-beautiful-dnd';
import {DroppableTable} from "@/ui/task/drag/DroppableTable";
import {DataType, Request} from "@/lib/definitions";
import {useEffect} from "react";
import {TaskSelectVO} from "@/lib/task/drag/data";
import {selectTaskAPI} from "@/lib/task/drag/service";

export default function Layout({children}: { children: React.ReactNode }) {
    const [allTaskList, setAllTaskList] = useState<DataType[]>([]);
    useEffect(() => {
        addData()
    },[])

    async function addData() {
        const requestParam: Request<TaskSelectVO> = {
            pageSize: 1000,
            pageNumber: 1,
            data: {state:'9'}
        }
        const res = await selectTaskAPI(requestParam)
        setAllTaskList(res.data.content)
    }

    // 处理拖拽结束事件
    const onDragEnd = (result: DropResult) => {
        console.log('拖拽结束')
        const {source, destination} = result;
        console.log('Source Droppable ID:', source.droppableId);
        console.log('Destination Droppable ID:', destination?.droppableId);
        if (!destination || !['table1', 'table2'].includes(destination.droppableId)) return;
        // 如果拖拽到无效区域，直接返回
        if (!destination) return;
        // 如果拖拽到同一个表格的同一个位置，直接返回
        if (source.droppableId === destination.droppableId && source.index === destination.index) {
            return;
        }
    };

    return (
        <DragDropContext onDragEnd={onDragEnd}>
            <div style={{display: 'flex',flexWrap: 'wrap',boxSizing: 'border-box',width:'100vw'}}>
                {/* 不紧急不重要 */}
                <DroppableTable tableCode='1' taskList={allTaskList.filter(task => task.priority == '1')}/>
                {/* 紧急不重要 */}
                <DroppableTable tableCode="2" taskList={allTaskList.filter(task => task.priority == '2')}/>
                {/* 不紧急重要 */}
                <DroppableTable tableCode='3' taskList={allTaskList.filter(task => task.priority == '3')}/>
                {/* 紧急重要 */}
                <DroppableTable tableCode='4' taskList={allTaskList.filter(task => task.priority == '4')}/>
            </div>
        </DragDropContext>
    );
}