'use client'

import React, {CSSProperties, useEffect} from "react";
import {Draggable, Droppable} from "react-beautiful-dnd";
import {Table, TableProps, Tooltip} from "antd";
import {DataType} from "@/lib/definitions";
import './index.modules.css'

interface DroppableTableProps // extends DragDropContextProps
{
    tableCode:string,
    taskList:DataType[]
}

export const DroppableTable: React.FC<DroppableTableProps> = (props) => {

    const [stateName, setStateName] = React.useState("");
    useEffect(() => {
        if(props.tableCode=='1'){
            setStateName('不紧急不重要');
        }else if (props.tableCode=='2'){
            setStateName('紧急不重要');
        }else if (props.tableCode=='3'){
            setStateName('不紧急重要');
        }else if (props.tableCode=='4'){
            setStateName('紧急重要');
        }
    }, []);
    const getItemStyle = (isDragging:any, draggableStyle:any):CSSProperties => {
        console.log({draggableStyle})
        return {
        // some basic styles to make the items look a bit nicer
        userSelect: "none",
        // change background colour if dragging
        background: isDragging ? "lightgreen" : "grey",
        // styles we need to apply on draggables
        ...draggableStyle,
            height:80
    }};

    const getListStyle = (isDraggingOver:boolean) => ({
        background: isDraggingOver ? "lightblue" : "lightgrey",
    });


    // 渲染表格行
    // @ts-ignore
    const renderTableRow = (data: DataType[], droppableId: string): TableProps<Item>['components']['body']['row'] =>
        (props:any) => {
            // console.log({props, droppableId});
            const { children, ...restProps } = props;
            const record = data.find((item) => item.id === restProps['data-row-key']);
            const index = data.findIndex((item) => item.id === restProps['data-row-key']);
            if (!record) {
                // console.error('Invalid record at index:', index);
                return null; // 或者返回一个占位符
            }
            return (
                <Draggable key={record.id} draggableId={record.id} index={index}>
                    {(provided,snapshot) => (
                        <tr
                            ref={provided.innerRef}
                            {...provided.draggableProps}
                            {...provided.dragHandleProps}
                            style={getItemStyle(
                                snapshot.isDragging,
                                provided.draggableProps.style
                            )}
                        >
                            {/*<td>{record.code}</td>*/}
                            <td>{record.name}</td>
                            <td>{record?.description}</td>
                            <td>{record.state}</td>
                            <td>起:{record.expectedStartTime}<br/>
                                止:{record.expectedEndTime}</td>
                        </tr>
                    )}
                </Draggable>
            );
        };
    const calculateScrollHeight = () => {
        // 计算50%视窗高度减去21px
        const height = `calc(50vh - 80px)`;
        return { y: height };
    };

    return (
        <Droppable droppableId={props.tableCode} key={props.tableCode}>
            {(provided,snapshot) => (
                <div ref={provided.innerRef}
                     {...provided.droppableProps}
                     style={getListStyle(snapshot.isDraggingOver)}
                     className="droppable-table"
                >
                    <Table<DataType>
                        dataSource={props.taskList}
                        scroll={calculateScrollHeight()}
                        columns={[
                            // {
                            //     title: '任务编码',
                            //     dataIndex: 'code',
                            //     key: 'code',
                            //     width: '10%',
                            // },
                            {
                                title: stateName,
                                dataIndex: 'name',
                                key: 'name',
                                width: '10%',
                                ellipsis: {
                                    showTitle: false,
                                },
                                render: (address) => (
                                    <Tooltip placement="topLeft" title={address}>
                                        {address}
                                    </Tooltip>
                                ),
                            },
                            {
                                title: '任务描述',
                                dataIndex: 'description',
                                key: 'description',
                                width: '20%',
                                ellipsis: {
                                    showTitle: false,
                                },
                                render: (description) => (
                                    <Tooltip placement="topLeft" title={description}>
                                        {description}
                                    </Tooltip>
                                ),
                            },
                            {
                                title: '任务状态',
                                dataIndex: 'state',
                                width: '5%',
                                key: 'state',
                            },
                            {
                                title: '期望时间',
                                dataIndex: 'expectedStartTime',
                                width: '10%',
                                key: 'expectedStartTime',
                            },
                        ]}
                        rowKey="id"
                        components={{
                            body: {
                                row: renderTableRow(props.taskList, props.tableCode),
                            },
                        }}
                        pagination={false}
                    />
                    {provided.placeholder}
                </div>
            )}
        </Droppable>
    )
}