'use client'

import React, {CSSProperties} from "react";
import {Draggable, Droppable} from "react-beautiful-dnd";
import {ConfigProvider, Tooltip} from "antd";
import {DataType} from "@/lib/definitions";
import './index.modules.css'
import dayjs from "dayjs";
import {getTaskState, taskPriorityList} from "@/lib/task/project/data";
import {List as VirtualizedList, AutoSizer} from "react-virtualized";
import 'react-virtualized/styles.css';
import OperationButton from "@/ui/task/OperationButton";

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

export const DroppableTable = React.memo((props: DroppableTableProps) => {
    const stateName = React.useMemo(() => {
        switch (props.tableCode) {
            case '0':
                return '不紧急不重要';
            case '1':
                return '紧急不重要';
            case '2':
                return '不紧急重要';
            case '3':
                return '紧急重要';
            default:
                return '';
        }
    }, [props.tableCode]);

    const getItemStyle = React.useCallback((isDragging: boolean, draggableStyle: any): CSSProperties => ({
        userSelect: "none",
        background: isDragging ? "lightgreen" : "white",
        position: 'relative',  // 确保 zIndex 生效
        zIndex: isDragging ? 2147483647 : 'auto',  // 使用 'auto' 代替 0 可能更好
        ...draggableStyle,
        borderBottom: '1px solid #f0f0f0',
        boxSizing: 'border-box',
        // verticalAlign: 'middle',
        // textAlign: 'center',
    }), []);

    const getListStyle = React.useCallback((isDraggingOver: boolean) => ({
        background: isDraggingOver ? "lightblue" : "white",
        height: 'calc((100vh - 42px)/2)',
        width: '50vw'
    }), []);

    const rowRenderer = React.useCallback(({index, key, style}: {
        index: number;
        key: string;
        style: React.CSSProperties
    }) => {
        const record = props.taskList[index];
        if (!record) return null;

        return (
            <Draggable key={record.id} draggableId={record.id} index={index}>
                {(provided, snapshot) => (
                    <div
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                        style={getItemStyle(snapshot.isDragging, {...provided.draggableProps.style, ...style})}
                        className="virtualized-row displayFlexRow"
                    >
                        <div style={{width: '15%'}}  className='displayFlexRow'>
                            <Tooltip placement="topLeft" title={record.name} className='displayFlexRow'>
                                <div  className='displayFlexRow'>{record.name}</div>
                            </Tooltip>
                        </div>
                        <div style={{width: '40%' , boxSizing: 'border-box', minWidth: 0}}  className='displayFlexRow'>
                            <Tooltip placement="topLeft" title={record.description}>
                                <div  className='displayFlexRow'>{record.description}</div>
                            </Tooltip>
                        </div>
                        <div style={{
                            width: '10%',
                        }}  className='displayFlexRow'>{getTaskState(record.state) ? getTaskState(record.state).name : ""}</div>
                        <div style={{width: '25%'}} className='displayFlexColumn'>
                            <div>起: {record.expectedStartTime ? dayjs(record.expectedStartTime).format("YYYY-MM-DD HH:mm") : ""}</div>
                            <div>止: {record.expectedStartTime ? dayjs(record.expectedStartTime).format("YYYY-MM-DD HH:mm") : ""}</div>
                        </div>
                        <div style={{width: '10%'}}  className='displayFlexRow'>
                            <OperationButton itemId={record.id} priority={record.priority} pid={record.pid}
                                             pPid={record.pPid}/>
                        </div>
                    </div>
                )}
            </Draggable>
        );
    }, [props.taskList, getItemStyle]);

    const headerStyle = React.useMemo(() => ({
        backgroundColor: taskPriorityList.find((item) => item.code === props.tableCode)?.color,
        height: '55px',
        borderBottom: '1px solid #f0f0f0',
        fontWeight: 'bold'
    }), [props.tableCode]);

    return (
        <Droppable droppableId={props.tableCode} key={props.tableCode}>
            {(provided, snapshot) => (
                <div
                    ref={provided.innerRef}
                    {...provided.droppableProps}
                    style={getListStyle(snapshot.isDraggingOver)}
                    className="droppable-table"
                >
                    <ConfigProvider>
                        {/* 表头 */}
                        <div style={headerStyle} className='displayFlexRow'>
                            <div style={{width: '15%'}} className='displayFlexRow'>{stateName}</div>
                            <div style={{width: '40%'}} className='displayFlexRow'>任务描述</div>
                            <div style={{width: '15%'}} className='displayFlexRow'>任务状态</div>
                            <div style={{width: '20%'}} className='displayFlexRow'>期望时间</div>
                            <div style={{width: '10%'}} className='displayFlexRow'>操作</div>
                        </div>
                        {/* 虚拟列表主体 */}
                        <div style={{height: 'calc(50vh - 76px)'}}>
                            <AutoSizer>
                                {({height, width}) => (
                                    <VirtualizedList
                                        className={"scrollHidden"}
                                        height={height}
                                        width={width}
                                        rowCount={props.taskList.length}
                                        rowHeight={80} // 与你的行高匹配
                                        rowRenderer={rowRenderer}
                                        overscanRowCount={8} // 预渲染的行数
                                    />
                                )}
                            </AutoSizer>
                        </div>
                    </ConfigProvider>
                    {provided.placeholder}
                </div>
            )}
        </Droppable>
    )
});