import { Tree } from 'antd';
import { useState } from 'react';

let findResult;
const treeList = [
  {
    title: 'parent 1',
    key: '0-0',
    children: [
      {
        title: 'parent 1-0',
        key: '0-0-0',
        disabled: true,
        children: [
          {
            title: 'leaf',
            key: '0-0-0-0',
            disableCheckbox: true,
          },
          {
            title: 'leaf',
            key: '0-0-0-1',
          },
        ],
      },
      {
        title: 'parent 1-1',
        key: '0-0-1',
        children: [{ title: <span style={{ color: '#1890ff' }}>sss</span>, key: '0-0-1-0' }],
      },
    ],
  },
];
const findItem = (data, node, parentItem) => {
    data.find((item) => {
      if (item?.key === node?.key) {
        if (parentItem) {
          item.parent = parentItem;
          return (findResult = item);
        } else return (findResult = item);
      } else if (item?.children?.length) {
        return (findResult = findItem(item.children, node, item));
      }
    });
    return findResult;
  },
// dropPosition -1是移動到和他平級在他上面    1是移動到和他平級在他下面  0是移動到他下面作為他子集
 dealDrap = (dragNode, node, treeData, dropPosition) => {
  let dragNodeResult, nodeResult;
  findResult = '';
  dragNodeResult = findItem(treeData, dragNode);
  findResult = '';
  nodeResult = findItem(treeData, node);
  // 0是移動到他下面作為他子集
  if (dropPosition === 0) {
    if (dragNodeResult?.parent?.key === nodeResult?.key) return true;
    return false;
  }
  // -1是移動到和他平級在他上面    1是移動到和他平級在他下面
  if (dropPosition === 1 || dropPosition === -1) {
    // 都有父
    if (dragNodeResult?.parent && nodeResult?.parent) {
      // 父相等
      if (dragNodeResult?.parent?.key == nodeResult?.parent?.key) {
        return true;
      } else {
        return false;
      }
    }
    //有父無父
    if (dragNodeResult?.parent && !nodeResult?.parent) {
      return false;
    }
    // 無父有父
    if (!dragNodeResult?.parent && nodeResult?.parent) {
      return false;
    }
    if (!dragNodeResult?.parent && !nodeResult?.parent) {
      return true;
    }
  }
};

// canRandom true可以隨意拖動  false只限平級拖動
const TreeTuo = ({ canRandom }) => {
  const [treeData, setTreeData] = useState(treeList),
    // 官方提供的方法可以隨意拖動
    onDrop = info => {
      const dropKey = info.node.key;
      const dragKey = info.dragNode.key;
      const dropPos = info.node.pos.split('-');
      const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);

      // 實現(xiàn)平級拖動的限制
      if (!canRandom) {
        const dealData = JSON.parse(JSON.stringify(treeData));
        const result = dealDrap(info.dragNode, info.node, [...dealData], dropPosition);
        if (!result) return;
      }

      const loop = (data, key, callback) => {
        for (let i = 0; i < data.length; i++) {
          if (data[i].key === key) {
            return callback(data[i], i, data);
          }
          if (data[i].children) {
            loop(data[i].children, key, callback);
          }
        }
      };
      const data = [...treeData];

      // Find dragObject
      let dragObj;
      loop(data, dragKey, (item, index, arr) => {
        arr.splice(index, 1);
        dragObj = item;
      });

      if (!info.dropToGap) {
        // Drop on the content
        loop(data, dropKey, item => {
          item.children = item.children || [];
          // where to insert 示例添加到頭部，可以是隨意位置
          item.children.unshift(dragObj);
        });
      } else if (
        (info.node.props.children || []).length > 0 && // Has children
        info.node.props.expanded && // Is expanded
        dropPosition === 1 // On the bottom gap
      ) {
        loop(data, dropKey, item => {
          item.children = item.children || [];
          // where to insert 示例添加到頭部，可以是隨意位置
          item.children.unshift(dragObj);
          // in previous version, we use item.children.push(dragObj) to insert the
          // item to the tail of the children
        });
      } else {
        let ar;
        let i;
        loop(data, dropKey, (item, index, arr) => {
          ar = arr;
          i = index;
        });
        if (dropPosition === -1) {
          ar.splice(i, 0, dragObj);
        } else {
          ar.splice(i + 1, 0, dragObj);
        }
      }
      setTreeData(data);
    };
  return <Tree draggable blockNode onDrop={onDrop} treeData={treeData} />;
};

export default TreeTuo;