import CardItem, {getDropStoreId} from "@/component/CardItem";
import {Content, StepDragType} from "@/component/type";
import React, {useCallback} from "react";
import drapStore from "@/mobx/DrapStore";
import {observer} from "mobx-react";


interface DragListProps {
    data:StepDragType<Content>[]
    parent:StepDragType<Content>|null
}
const _tagStore = getDropStoreId()
const tagStore = _tagStore()
const DragList = ({data,parent}:DragListProps) => {
    console.log(data)
    if(!Array.isArray(data)){
        data = []
    }
    // const [list, setList] = useState(data);
    data.forEach((e:StepDragType<object>)=>{
        if(!e.tag){
            e.tag = tagStore.tag
        }
    })
    // 在当前位置插入模块
    const insertCard = useCallback(
        (currentDrop:StepDragType<Content>|null,atIndex:  number, element:StepDragType<Content>) => {
            drapStore.insertDrop(currentDrop,atIndex,element)
        },
        [data],
    )
    // 删除当前模块
    const deleteCard = useCallback(
        (currentDrop:StepDragType<Content>|null,item:StepDragType<Content>) => {
            if(currentDrop===null){
                drapStore.removeDrop(item)
            }else{
                currentDrop.children = currentDrop.children?.filter(dropItem=>dropItem.id!==item.id)
                drapStore.updateState()
            }
        },
        [data],
    )
    const findCard = useCallback(
        (id: string,item:any) => {

            const card = data.filter((c:StepDragType<object>) => `${c.id}` === id)[0]
            return {
                card,
                index: data.indexOf(card),
            }
        },
        [data],
    )
    const moveCard = useCallback(
        (id: string, to: number,item:StepDragType<Content>,parentItem:StepDragType<Content>|null) => {
            // debugger
            // if(parent===null){
            //     drapStore.moveDrop(id,to,item,parentItem)
            //     return;
            // }
            const { card, index } = findCard(id,item)
            // console.log(card)
            if (card===undefined){
                return
            }
            // const ord = data[to]
            // data[to] = card
            // data[index] = ord
            // console.log(data[to]?.data?.value,data[index]?.data?.value)
            drapStore.moveDrop(id,to,item,parentItem)
            // drapStore.updateState()
        },
        [findCard, data],
    )
    const childrenCreate = useCallback((item:StepDragType<Content>,newItem:StepDragType<Content>) =>{
        const Item = { ...newItem, id: String(new Date().getTime()) }
        drapStore.addChildren(item,Item)
    },[data])
    return (
            <div >
                {data&&data.map((item: StepDragType<Content>,index:number) => {
                    return <span key={item?.id}>
                                <CardItem
                                    parent={parent} key={item?.id}
                                    tag={tagStore.tag}
                                    childrenCreate={(newItem)=>childrenCreate(item as StepDragType<Content>,newItem)}
                                    len={data?data?.length:0}
                                    data={item}
                                    deleteCard={deleteCard}
                                    insertCard={insertCard}
                                    moveCard={moveCard}
                                    findCard={findCard}>
                                    <DragList
                                        parent={item}
                                        data={item.children?item.children:[]}  />
                                </CardItem>
                            </span>;
                })}
            </div>
    );
}
export default DragList