import React from 'react';
import { useDrag, useDrop } from 'tbhooks';

export default () => {
  const getDragProps = useDrag({
    onDragStart: (data: any, e: React.DragEvent) => {
      console.log(data + ' is drag');
    },
  });
  const [dropProps, { isHovering, domContent }] = useDrop({
    onFile: (file: File[]) => {
      console.log(file);
    },
    onText: (text: string) => {
      console.log(text);
    },
    onDom: (content: any) => {
      console.log(content);
    },
    onUri: (uri: string) => {
      console.log(uri);
    },
  });
  return (
    <>
      <div
        {...dropProps}
        style={{
          border: '1px solid #e8e8e8',
          padding: 16,
          width: 80,
          textAlign: 'center',
          marginRight: 16,
        }}
      >
        {isHovering ? '放下' : '拖到这里'}
      </div>
      <div
        {...dropProps}
        style={{
          border: '1px solid #e8e8e8',
          padding: 16,
          width: 80,
          textAlign: 'center',
          marginRight: 16,
        }}
      >
        内容：{domContent}
      </div>
      <div {...getDragProps('box1')}>box1</div>
      <a
        href="v1/node"
        onDragStart={e => {
          console.log(e.dataTransfer.getData('text/uri-list'));
        }}
      >
        链接
      </a>
    </>
  );
};