import { useDrag } from "ahooks"
import { Button, Modal } from "antd"
import React, { useEffect, useState } from "react"
import arrayMove from "array-move";
import { Dropping, DroppingCon } from "./dropping"
import './index.less'

interface Props {
    value: { siteSet: string[], bidCoefficient?: number, deepBidCoefficient?: number }[],   // 版位组合
    onChange?: (data: { siteSet: string[], bidCoefficient?: number, deepBidCoefficient?: number }[]) => void
}
/**
 * 广告版位组合设置
 * @returns 
 */
const AdPositionList: React.FC<Props> = (props) => {

    /*************************/
    const { value, onChange } = props
    const [visible, setVisible] = useState<boolean>(false)
    const [dragging, setDragging] = useState<string | null>(null);
    const [siteSetPackageData, setSiteSetPackageData] = useState<{ siteSet: string[], bidCoefficient?: number, deepBidCoefficient?: number }[]>([])
    /*************************/

    useEffect(() => {
        setSiteSetPackageData(value || [])
    }, [value])

    const getDragProps = useDrag({
        onDragStart: (data) => {
            setDragging(data);
        },
        onDragEnd: () => {
            setDragging(null);
        },
    });

    const handleOk = () => {
        console.log('siteSetPackageData---->', siteSetPackageData);
        onChange && onChange(JSON.parse(JSON.stringify(siteSetPackageData)))
        setVisible(false)
    }

    const setHandle = (to: string, name: string) => {
        let newSiteSetPackageData: { siteSet: string[], bidCoefficient?: number, deepBidCoefficient?: number }[] = JSON.parse(JSON.stringify(siteSetPackageData))
        setDragging(null);
        let data = name?.split('_')
        let type = data[0]
        let index = data[1]
        let oldIndex = newSiteSetPackageData?.findIndex(item => item.siteSet?.includes(to))
        let oldSiteSetPackage = newSiteSetPackageData?.find(item => item.siteSet?.includes(to))
        switch (type) {
            case 'dropping':
                if ((oldSiteSetPackage && oldSiteSetPackage?.siteSet?.length === 1) && index && Number(index) === oldIndex) {
                    return
                }
                if (oldSiteSetPackage && oldSiteSetPackage?.siteSet?.length > 1) {
                    newSiteSetPackageData = newSiteSetPackageData.map((item, index) => {
                        if (oldIndex === index) {
                            let newsiteSet = item.siteSet?.filter(item => item !== to)
                            return { ...item, siteSet: newsiteSet }
                        } else {
                            return item
                        }
                    })
                    newSiteSetPackageData.splice(Number(index), 0, { siteSet: [to], bidCoefficient: 1, deepBidCoefficient: 1 })
                    setSiteSetPackageData(newSiteSetPackageData)
                } else {
                    setSiteSetPackageData(() => arrayMove(newSiteSetPackageData, oldIndex, Number(index)))
                }
                break
            case 'con':
                newSiteSetPackageData = newSiteSetPackageData?.map((item, i) => {
                    if (Number(index) === i + 1) {
                        let siteSet = item.siteSet
                        siteSet.push(to)
                        return { bidCoefficient: 1, deepBidCoefficient: 1, siteSet }
                    }
                    return { ...item, bidCoefficient: 1, deepBidCoefficient: 1 }
                })
                if (oldSiteSetPackage && oldSiteSetPackage?.siteSet?.length > 1) {
                    newSiteSetPackageData = newSiteSetPackageData?.map((item, index) => {
                        if (oldIndex === index) {
                            let newsiteSet = item.siteSet?.filter(item => item !== to)
                            return { ...item, siteSet: newsiteSet }
                        } else {
                            return item
                        }
                    })
                } else {
                    newSiteSetPackageData = newSiteSetPackageData?.filter((item, index) => index !== oldIndex)
                }
                setSiteSetPackageData(newSiteSetPackageData)
                break
        }
    }

    return <>
        <Button onClick={() => setVisible(true)}>修改广告版位组合</Button>
        {visible && <Modal
            title={<div>
                <h3><strong>修改版位组合</strong></h3>
                <div style={{ color: '#939599', fontSize: 12 }}>你可拖拽广告版位进行重新组合或拆分新的组合</div>
            </div>}
            open={visible}
            onOk={handleOk}
            bodyStyle={{ paddingTop: 0, paddingBottom: 0 }}
            onCancel={() => setVisible(false)}
        >
            {siteSetPackageData?.map((item, index) => {
                return <div key={index}>
                    {index === 0 && <Dropping name={'dropping_0'} className='wait' onChange={setHandle} />}
                    <div className='myUl'>
                        <div className='myTitle'>组合{index + 1}</div>
                        <DroppingCon siteSet={item?.siteSet} name={`con_${index + 1}`} onChange={setHandle} getDragProps={getDragProps} dragging={dragging}/>
                    </div>
                    <Dropping name={`dropping_${index + 1}`} className='wait' onChange={setHandle} />
                </div>
            })}
        </Modal>}
    </>
}


export default React.memo(AdPositionList)