// index.js

import React from 'react'
import {
  FlowContainer,
  NodeList,
  DropBox,
  DropBoxFn,
  DragGroup, 
  DragItem
} from './DragFlow'

import DropItem from './dropItem' // 自定义放置组件
import DragItemComponent from './dragItem' // 自定义拖拽组件

import './index.css'
/**
 * DropBoxFn(type, Component)
 * @param type 放置区域的type
 * @param Component 放置区域的自定义节点
 */
const DropItemBox = DropBoxFn('A', DropItem)
const DropItemYzy = DropBoxFn('B', DropItem)

class FlowExample extends React.Component {
  flowRef = React.createRef();
  state = {
    dropBoxBoxRange: {
      minX: 200,
      maxX: 800,
      minY: 0,
      maxY: 900
    },
    DragList: [
      { type: 'A', id: 'box-type-fn1', title: 'A功能组件1', status: 'normal' }
      { type: 'A', id: 'box-type-fn2', title: 'A功能组件2', status: 'normal' }
    ]
  }

  // jsplumb配置
  CreateInstanceConfig = {
    Connector: 'Flowchart',
    Endpoint: 'Dot',
    EndpointStyle: {
      stroke: 'yellowgreen', 
      strokeWidth: 1,
      fill: '#fff',
      radius: 4
    },
    ConnectionOverlays: [
      ['Arrow', {
        width: 10,
        length: 10,
        location: 1
      }],
      ["Custom", {
        create: () => {
          const ElementDiv=document.createElement("div")
          console.log(ElementDiv)
          ElementDiv.classList.add('connectDelete')

          ElementDiv.innerText = 'X'
          return ElementDiv
        },
        location: 0.5,
        id: "custom-delete",
        events:{
          click: (labelOverlay, originalEvent) => { 
            const { current } = this.flowRef
            const { ref } = current
            ref.current.deleteConnectHandle(labelOverlay)
          }
        }
      }],
    ]
  }

  render () {
    const {
      DragList_A,
      dropBoxBoxRange,
    } = this.state

    return (
      <FlowContainer
        ref={this.flowRef}
        config={this.CreateInstanceConfig}
      >
        <NodeList 
          className='dragNodeListBox'
          backgroundstyle='#e8fdff'
        >
            {
              DragList_A.map((item) => {
                return (
                  <DragItem 
                    dragItemNode={DragItemComponent}
                    key={item.id} 
                    type={item.type} 
                    info={item}
                  />
                )
              })
            }
        </NodeList>
        <DropBox className='dropBox'>
          <DropItemBox 
            dropBoxClassName='dropBoxContainer'
            onExecuteHandle={this.onExecuteHandle}
            onSettingHandle={this.onSettingHandle}
            id='dropBox-box'
            type='A' 
            range={dropBoxBoxRange} 
          />
      </FlowContainer>
    )
  }
}