'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 'react-virtualized/styles.css';
import RightOption from "@/ui/task/RightOption";
import {CopyOutlined} from "@ant-design/icons";

interface DroppableTableProps {
    tableCode: string,
    taskList: DataType[],
    refreshDate?: () => void,
}

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: isDragging ? 2147483647 : 'auto',
        ...draggableStyle,
        borderBottom: '1px solid #f0f0f0',
        boxSizing: 'border-box',
        verticalAlign: 'middle',
        textAlign: 'center',
        borderColor:taskPriorityList.find((item) => item.code === props.tableCode)?.color
    }), []);

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

    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 scrollHidden"
                >
                    <ConfigProvider>
                        {/* 表头 */}
                        <div style={headerStyle} className='displayFlexRow'>
                            <div style={{width: '20%',paddingLeft:"1rem"}} className='displayFlexRow'>{stateName}</div>
                            <div style={{width: '45%'}} className='displayFlexRow'>任务描述</div>
                            <div style={{width: '15%'}} className='displayFlexRow'>任务状态</div>
                            <div style={{width: '20%'}} className='displayFlexRow'>期望时间</div>
                        </div>
                        {/* 虚拟列表主体 */}
                        <div style={{height: 'calc(50vh - 76px)',overflow: 'auto'}}>
                            {props.taskList.map((record, index) => {
                                return <Draggable key={record.id} draggableId={record.id} index={index}>
                                    {(provided, snapshot) => (
                                        <RightOption refreshDate={props.refreshDate} itemId={record.id}
                                                     itemName={record.name} pid={record.pid}
                                                     pPid={record.pPid} children={<div
                                            ref={provided.innerRef}
                                            {...provided.draggableProps}
                                            {...provided.dragHandleProps}
                                            style={getItemStyle(snapshot.isDragging, {...provided.draggableProps.style})}
                                            className="virtualized-row displayFlexRow"
                                        >
                                            <div style={{width: '20%',paddingLeft:"1rem"}} className='displayFlexRow'>
                                                <Tooltip placement="topLeft" title={record.name}
                                                         className='displayFlexRow'>
                                                    <div className='displayFlexRow'>{record.name}</div>
                                                </Tooltip>
                                            </div>
                                            <div style={{width: '45%', boxSizing: 'border-box', minWidth: 0}}
                                                 className='displayFlexRow'>
                                                <Tooltip placement="topLeft" title={record.description}>
                                                    <div className='displayFlexRow text-ellipsis'>{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.expectedEndTime ? dayjs(record.expectedEndTime).format("YYYY-MM-DD HH:mm") : ""}</div>
                                            </div>
                                        </div>}>

                                        </RightOption>
                                    )}
                                </Draggable>
                            })}
                        </div>
                    </ConfigProvider>
                    {provided.placeholder}
                </div>
            )}
        </Droppable>
    )
});