import React, { useState, useRef, useContext, useEffect, useCallback } from 'react'
import styles from './index.less'
import { useDrag, useDrop, DndProvider } from 'react-dnd'
import { GlobalStore } from '../../index'
import { message } from 'antd'

const Group = (props) => {

  const { shema, setShema } = useContext(GlobalStore)
  const ref = useRef(null)

  const swapIndex = useCallback((index1, index2) => {
    const cardList = shema.work
    const tmp = cardList[index1];
    cardList[index1] = cardList[index2];
    cardList[index2] = tmp;
    setShema({ ...shema, work: cardList })
  }, [shema.work])

  const [, drag] = useDrag({
    type: 'card',
    item: {
      id: props.id,
      index: props.index,
      widget: props.widget,
    },
  })

  const [, drop] = useDrop({
    accept: 'card',
    drop(item) {
      if (item.widget !== '通栏布局') {
        const isHave = props.children.some(v => v.widget === item.widget)
        if (isHave) {
          message.info({ type: 'info', content: '同一个分组不允许组件重复!' })
        } else {
          setShema(shema => {
            let array = []
            shema?.work?.forEach(v => {
              let children = [...v.children]
              if (props.id === v.id) {
                children = [...v.children, item]
              }
              array.push({ ...v, children: children })
            })
            return { ...shema, work: array }
          })
        }
      }
    },
    hover(item) {
      if (item.widget === '通栏布局') {
        swapIndex(props.index, item.index)
        item.index = props.index
      }
    }
  })

  useEffect(() => {
    drag(ref)
    drop(ref)
  }, [])

  const groupClick = (e, item) => {
    e.stopPropagation()
    let array = []
    shema?.work.forEach(v => {
      array.push({ ...v, active: item.id === v.id, children: v.children.map(v => ({ ...v, active: false })) })
    })
    setShema({ ...shema, work: array, active: false })
  }

  const deleteGroup = (e, item) => {
    e.stopPropagation()
    let array = []
    shema?.work.forEach(v => {
      if (item.id !== v.id) {
        array.push({ ...v, active: false })
      }
    })
    setShema({ ...shema, work: array, active: true })
  }

  const deleteCrad = (e, card) => {
    e.stopPropagation()
    let array = []
    shema?.work.forEach(v => {
      let children = []
      v.children.forEach(s => {
        if (s.id !== card.id) {
          children.push({ ...s })
        }
      })
      array.push({ ...v, active: false, children })
    })
    setShema({ ...shema, work: array, active: false })
  }

  const cardClick = (e, card) => {
    e.stopPropagation()
    let array = []
    shema?.work.forEach(v => {
      let children = []
      v.children.forEach(s => {
        children.push({ ...s, active: s.id === card.id })
      })
      array.push({ ...v, active: false, children })
    })
    setShema({ ...shema, work: array, active: false })
  }

  return (
    <div
      className={styles.group}
      onClick={(e) => groupClick(e, props)}
      active={`${props.active}`}
      ref={ref}
    >
      {
        props.active && <span className={styles.deleted} onClick={(e) => deleteGroup(e, props)}>删除</span>
      }
      {
        props.name && (
          <div className={styles.title}>
            <div className={styles['t-bg']}></div>
            <div className={styles['t-text']}>{props.name}</div>
          </div>
        )
      }
      {
        props.children.map(v => {
          return (
            <div
              key={v.id}
              className={styles.card}
              widget={v.widget}
              onClick={(e) => cardClick(e, v)}
              active={`${v.active}`}
            >
              {
                v.active && <span className={styles.deleted} onClick={(e) => deleteCrad(e, v)}>删除</span>
              }
            </div>
          )
        })
      }
    </div>
  )

}

export default Group