import { SiteSetEnum } from "@/services/launchAdq/enum";
import { ColumnHeightOutlined } from "@ant-design/icons";
import { useDrop } from "ahooks";
import React from "react"

interface PropsCon {
    siteSet: string[],
    name: string,    // 接收区名字区分接收区
    onChange?: (to: string, name: string) => void,
    getDragProps: any,
    dragging?: any,
}

/**
 * 带内容的接收区
 * @param props 
 * @returns 
 */
const DroppingCon: React.FC<PropsCon> = (props) => {

    /********************************/
    const { siteSet, name, onChange, getDragProps, dragging } = props
    /********************************/

    const [dropProps, { isHovering }] = useDrop({
        onDom: (con: string, e) => { // 头部
            onChange && onChange(con, name)
        },
    });

    return <div className={`myLi ${isHovering ? 'dragging' : ''}`}>
        {(dragging && !siteSet?.includes(dragging)) && <div className="hoverDiv" {...dropProps}></div>}
        {siteSet?.map((item1, index1) => {
            return <div {...getDragProps(item1)} className="dropping">
                <ColumnHeightOutlined />
                <span style={{ color: '#313233' }}>{SiteSetEnum[item1]}</span>
            </div>
        })}
    </div>
}

interface Props {
    name: string,    // 接收区名字区分接收区
    className?: string,
    onChange?: (to: string, name: string) => void
}

/**
 * 拖拽接收区
 * @returns 
 */
const Dropping: React.FC<Props> = (props) => {

    /************************/
    const { className, name, onChange } = props
    /************************/

    const [dropProps, { isHovering }] = useDrop({
        onDom: (con: string, e) => { // 头部
            onChange && onChange(con, name)
        },
    });

    return <div className={`${className} dropping ${isHovering ? 'dragging' : ''}`} {...dropProps}></div>
}

export {
    DroppingCon,
    Dropping
}