import {Dialog, Image, InfiniteScroll, List, PullToRefresh, SwipeAction} from 'antd-mobile'
import React, {Fragment, useEffect, useRef, useState} from 'react'
import {
    DragDropContext,
    Draggable,
    Droppable,
    // DropResult,
} from 'react-beautiful-dnd'
import {getTaskList} from "../../utils";
import "./index.css"

const reorder = (
    list,
    startIndex,
    endIndex
) => {
    const result = Array.from(list)
    const [removed] = result.splice(startIndex, 1)
    result.splice(endIndex, 0, removed)

    return result
}

const ToDoList = () => {
    const [taskList, setTaskList] = useState([])
    const [hasMore, setHasMore] = useState(true)
    const [pageNumber, setPageNumber] = useState(1)
    async function loadMore() {
        getTaskList(pageNumber).then(result => {
            console.log("getTaskList()", result)
            setTaskList(val => [...val, ...result.data.data.content])
            setHasMore(result.data.data.content.length > 0)
            setPageNumber(pageNumber+1)
        })
    }
    useEffect(() => {
        getTaskList(pageNumber).then(result => {
            console.log("getTaskList()", result)
            setTaskList(result.data.data.content)
            setPageNumber(pageNumber+1)
        })
    }, [])
    const onDragEnd = (result) => {
        if (!result.destination) return
        const newList = reorder(taskList, result.source.index, result.destination.index)
        setTaskList([...newList])
    }
    const ref = useRef(null)
    return (
        <Fragment>
            <PullToRefresh
                onRefresh={async () => {
                    getTaskList(1).then(result => {
                        console.log("getTaskList()", result)
                        setTaskList(result.data.data.content)
                        setPageNumber(pageNumber+1)
                        setHasMore(true)
                    })
                }}
            >
            <List
                // header='任务清单'
            >
                <DragDropContext onDragEnd={onDragEnd}>
                    <Droppable droppableId='droppable'>
                        {droppableProvided => (
                            <div ref={droppableProvided.innerRef}>
                                {taskList.map((item, index) => (
                                    <Draggable key={item.id} draggableId={item.id} index={index}>
                                        {(provided, snapshot) => (
                                            <div
                                                ref={provided.innerRef}
                                                {...provided.draggableProps}
                                                {...provided.dragHandleProps}
                                                style={{
                                                    ...provided.draggableProps.style,
                                                    opacity: snapshot.isDragging ? 0.8 : 1,
                                                }}
                                            >
                                                <SwipeAction
                                                    ref={ref}
                                                    closeOnAction={false}
                                                    closeOnTouchOutside={false}
                                                    rightActions={[
                                                        {
                                                            key: 'delete',
                                                            text: '删除',
                                                            color: 'danger',
                                                            onClick: async () => {
                                                                await Dialog.confirm({
                                                                    content: '确定要关闭吗？',
                                                                })
                                                                ref.current?.close()
                                                            },
                                                        },
                                                        {
                                                            key: 'close',
                                                            text: '关闭',
                                                            color: 'warning',
                                                            onClick: async () => {
                                                                await Dialog.confirm({
                                                                    content: '确定要关闭吗？',
                                                                })
                                                                ref.current?.close()
                                                            },
                                                        },
                                                        {
                                                            key: 'update',
                                                            text: '修改',
                                                            color: 'primary',
                                                            onClick: async () => {
                                                                await Dialog.confirm({
                                                                    content: '确定要修改吗？',
                                                                })
                                                                ref.current?.close()
                                                            },
                                                        },
                                                        {
                                                            key: 'complete',
                                                            text: '完成',
                                                            color: 'success',
                                                            onClick: async () => {
                                                                await Dialog.confirm({
                                                                    content: '确定要完成吗？',
                                                                })
                                                                ref.current?.close()
                                                            },
                                                        },
                                                    ]}
                                                >
                                                    <List.Item
                                                        key={item.id}
                                                        // prefix={
                                                        //     <Image
                                                        //         src={item.avatar}
                                                        //         style={{ borderRadius: 20 }}
                                                        //         fit='cover'
                                                        //         width={40}
                                                        //         height={40}
                                                        //     />
                                                        // }
                                                        title={<span style={{color: "red"}}>{item.name}</span>}
                                                        children={item.description}
                                                        description={item.state}
                                                        onClick={
                                                            () => {
                                                                console.log("dianji")
                                                            }
                                                        }
                                                    />
                                                </SwipeAction>
                                            </div>
                                        )}
                                    </Draggable>
                                ))}
                                {droppableProvided.placeholder}
                            </div>
                        )}
                    </Droppable>
                </DragDropContext>
            </List>
            <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
            </PullToRefresh>
        </Fragment>
    )
}
export default ToDoList;