import { Tree } from 'antd'
import React, { useMemo, useCallback, useState } from 'react'
import style from './index.less'
const fileImg = require('../../../../../public/file.png')
function TreeBox(props: { data: any[], belongUser: any }): any {
    const [item, setItem] = useState<any>('')
    const [actionId, setActionId] = useState<any>('')//拖动选中的当前文件夹ID
    const [hoverId, setHoverId] = useState<any>('')//hoverId
    const [expandedKeys, setExpandedKeys] = useState<any>([])
    let arr = useMemo(() => {
        let keys: any[] = []
        let menuArr = [
            {
                id: 0,
                title: props.belongUser == 1 ? '个人本地' : '公共本地',
                icon: <img src={fileImg} />,
                childMedias: props?.data
            }
        ]
        function handle(arr: any[]) {
            let newArr = arr?.map((item) => {
                if (Array.isArray(item.childMedias)) {
                    let children: any[] = handle(item.childMedias)
                    keys.push(item.id)
                    return { ...item, children, icon: <img src={fileImg} />, key: item.id }
                } else {
                    return { ...item, icon: <img src={fileImg} />, key: item.id }
                }
            })
            return newArr
        }
        let newArr = menuArr?.map((item) => {
            if (Array.isArray(item.childMedias)) {
                let children: any[] = handle(item.childMedias)
                keys.push(item.id)
                return { ...item, children, icon: <img src={fileImg} />, key: item.id }
            } else {
                return { ...item, icon: <img src={fileImg} />, key: item.id }
            }
        })
        setExpandedKeys(keys)
        return newArr
    }, [props.data, props.belongUser])
    // 点击树
    const treeClick = useCallback((selectedKeys, e) => {
        setItem(e.selectedNodes[0])
    }, [])
    return [<div className={`${style.tree}`} id='tree'>
        <Tree
            treeData={arr}
            showIcon
            draggable
            blockNode
            defaultExpandAll={true}
            autoExpandParent={true}
            expandedKeys={expandedKeys}
            onExpand={(expandedKeys) => {
                setExpandedKeys(expandedKeys)
            }}
            onSelect={treeClick}
            onDragStart={(info) => {
                info.event.preventDefault()
            }}
            titleRender={(nodeData: any) => {
                return <span
                    style={hoverId === nodeData.id ? { color: 'red', backgroundColor: '#efefef', display: 'inline-block', width: 'calc(100% - 24px)' } : { display: 'inline-block', width: 'calc(100% - 24px)' }}
                    onDrop={() => {
                        if (nodeData.id !== actionId) {
                            setActionId(nodeData.id)
                        }
                    }}
                >{nodeData.title}</span>
            }}
            allowDrop={(info: any) => {
                if (info?.dropNode?.id !== hoverId) {
                    setHoverId(info?.dropNode?.id)
                }
                return false
            }}
        />
    </div>, item, actionId, setActionId, setHoverId]
}
export default TreeBox