import React, { useState, useEffect } from 'react';
import { Table } from 'antd';

import { HTML5Backend } from 'react-dnd-html5-backend';
import { DndProvider } from 'react-dnd';

import DraggableBodyRow from './DraggableBodyRow';

const DragTable = props => {
  const { columns, dataSource, dragCallBack, ItemTypes } = props;
  const [data, setData] = useState(null); // 分组后的数组
  const components = {
    body: {
      row: DraggableBodyRow,
    },
  };
  useEffect(() => {
    if (dataSource.length > 0) {
      setData(dataSource);
    }
  }, [dataSource]);
  // 每次拖拽后返回
  useEffect(() => {
    dragCallBack(data);
  }, [data]);
  // 移动数组元素到指定位置
  const moveInArray = (arr, from, to) => {
    // 确保是有效数组
    if (Object.prototype.toString.call(arr) !== '[object Array]') {
      throw new Error('Please provide a valid array');
    }
    // 删除当前的位置
    let item = arr.splice(from, 1);
    // 确保还剩有元素移动
    if (!item.length) {
      throw new Error(`There is no item in the array at index ${from}`);
    }
    // 移动元素到指定位置
    arr.splice(to, 0, item[0]);
    return arr;
  };
  // 拖拽表格
  const moveRow = (dragIndex, hoverIndex) => {
    setData(val => {
      let newData = JSON.parse(JSON.stringify(val));
      newData = moveInArray(newData, dragIndex, hoverIndex);
      return newData;
    });
  };
  return (
    <div>
      <DndProvider backend={HTML5Backend}>
        <Table
          bordered
          columns={columns}
          dataSource={data}
          components={components}
          onRow={(record, index) => ({
            index,
            ItemTypes,
            moveRow,
            onClick: () => props.onClick && props.onClick(record),
          })}
          {...props}
        />
      </DndProvider>
    </div>
  );
};

export default DragTable;