import * as React from "react";
import { gData } from "./util/data-util";
import "../assets/co-tree.css";
// import { withStyles } from "@material-ui/styles";
// import { styles } from '../styles';
import Tree from "../../co-tree";

const STYLE = `

.draggable-demo {
  width: 255px;
  margin-left: 30px;
}

.co-tree{
  background: #f5f7f9;
}

.co-tree-child-tree {
  display: block;
}

.node-motion {
  transition: all .3s;
  overflow-y: hidden;
}
`;

const motion = {
  motionName: "node-motion",
  motionAppear: false,
  onAppearStart: () => {
    return { height: 0 };
  },
  onAppearActive: node => ({ height: node.scrollHeight }),
  onLeaveStart: node => ({ height: node.offsetHeight }),
  onLeaveActive: () => ({ height: 0 })
};

const Demo: React.SFC<any> = () => {
  const [_gData, setGData] = React.useState(gData);
  const [autoExpandParent, setAutoExpandParent] = React.useState(true);
  const [expandedKeys, setExpandedKeys] = React.useState([
    "0-0-key",
    "0-0-0-key",
    "0-0-0-0-key"
  ]);

  //   let onDragStart: any;

  const onDragEnter = ({ expandedKeys }) => {
    setExpandedKeys(expandedKeys);
  };

  const onDrop = info => {
    const dropKey = info.node.props.eventKey;
    const dragKey = info.dragNode.props.eventKey;
    const dropPos = info.node.props.pos.split("-");

    const dropPosition =
      info.dropPosition - Number(dropPos[dropPos.length - 1]);

    const loop = (data, key, callback) => {
      data.forEach((item, index, arr) => {
        if (item.key === key) {
          callback(item, index, arr);
          return;
        }
        if (item.children) {
          loop(item.children, key, callback);
        }
      });
    };

    const data = [..._gData];

    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.push(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);
      });
    } else {
      // Drop on the gap
      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);
      }
    }
    setGData(data);
  };

  const onExpand = expandedKeys => {
    setExpandedKeys(expandedKeys);
    setAutoExpandParent(false);
  };
  return (
    <div className="draggable-demo">
      <style dangerouslySetInnerHTML={{ __html: STYLE }} />
      <h2>draggable</h2>
      <p>drag a node into another node</p>
      <Tree
        expandedKeys={expandedKeys}
        onExpand={onExpand}
        autoExpandParent={autoExpandParent}
        draggable
        // onDragStart={onDragStart}
        onDragEnter={onDragEnter}
        onDrop={onDrop}
        treeData={_gData}
        motion={motion}
      />
    </div>
  );
};

export default Demo;