import _extends from "@babel/runtime/helpers/extends";
import React, { useState } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import update from 'immutability-helper'; // import styles from './index.scss';

import "./index.scss"; // export interface ReactDndProps {
//   initData?: any;
// }

var InitialData = [{
  id: 100,
  issues: [{
    id: 1,
    name: '丁振',
    status: 0,
    taskName: '市场管理开发',
    projectName: '市场管理'
  }, {
    id: 2,
    name: '谷艾玲',
    status: 1,
    taskName: '项目管理开发',
    projectName: '项目管理'
  }, {
    id: 3,
    name: '爱困',
    status: 2,
    taskName: '门户管理开发',
    projectName: '门户管理'
  }],
  acceptIds: [100]
}, {
  id: 200,
  issues: [{
    id: 4,
    name: '艾因',
    status: 0,
    taskName: '网关管理开发',
    projectName: '网关管理'
  }, {
    id: 5,
    name: '斯坦',
    status: 0,
    taskName: '绩效管理开发',
    projectName: '绩效管理'
  }],
  acceptIds: [200]
}]; // for (let i = 6; i < 100; i++) {
//   InitialData[0].issues.push({ id: i, name: `uten${i}` });
// }

var Issue = function Issue(props) {
  var id = props.id,
      issueIndex = props.issueIndex,
      name = props.name,
      status = props.status,
      taskName = props.taskName,
      projectName = props.projectName;
  return /*#__PURE__*/React.createElement(Draggable, {
    draggableId: "" + id,
    index: issueIndex
  }, function (provided, snapshot) {
    return /*#__PURE__*/React.createElement("div", _extends({
      ref: provided.innerRef,
      className: snapshot.isDragging ? 'issueDragging' : 'issue'
    }, provided.draggableProps, provided.dragHandleProps, {
      style: {
        backgroundColor: ''
      }
    }), /*#__PURE__*/React.createElement("div", null, taskName), /*#__PURE__*/React.createElement("div", {
      className: status == 0 ? 'error' : status == 1 ? 'warning' : status == 2 ? 'success' : 'error'
    }, status == 0 ? '未完成' : status == 1 ? '进行中' : status == 2 ? '已完成' : '无状态'), /*#__PURE__*/React.createElement("div", null, name), /*#__PURE__*/React.createElement("div", null, projectName));
  });
};

var Column = function Column(props) {
  var columnIndex = props.columnIndex,
      activeColumn = props.activeColumn,
      column = props.column;
  var id = column.id,
      issues = column.issues;
  return /*#__PURE__*/React.createElement("div", {
    className: 'column'
  }, /*#__PURE__*/React.createElement(Droppable, {
    droppableId: "" + columnIndex,
    mode: "virtual",
    isDropDisabled: activeColumn ? !(activeColumn.acceptIds.includes(id) || id === activeColumn.id) : true
  }, function (provided, snapshot) {
    return /*#__PURE__*/React.createElement("div", _extends({
      ref: provided.innerRef,
      className: snapshot.isDraggingOver ? 'columnContentActive' : 'columnContent'
    }, provided.droppableProps), issues.map(function (issue, index) {
      return /*#__PURE__*/React.createElement(Issue, {
        key: issue.id,
        issueIndex: index,
        id: issue.id,
        name: issue.name,
        taskName: issue.taskName,
        status: issue.status,
        projectName: issue.projectName
      });
    }), provided.placeholder);
  }));
};

var ReactDnd = function ReactDnd() {
  var _useState = useState(InitialData),
      data = _useState[0],
      setData = _useState[1];

  var _useState2 = useState(null),
      activeColumn = _useState2[0],
      setActiveColumn = _useState2[1];

  var onDragStart = function onDragStart(result) {
    var source = result.source;
    var columnIndex = Number(source.droppableId);
    setActiveColumn(data[columnIndex]);
  };

  var onDragEnd = function onDragEnd(result) {
    var _update, _update2;

    var destination = result.destination,
        source = result.source;

    if (!destination) {
      return;
    }

    var fromColumnIndex = Number(source.droppableId);
    var fromIssueIndex = source.index;
    var toColumnIndex = Number(destination.droppableId);
    var toIssueIndex = destination.index;
    var TempIssue = data[fromColumnIndex].issues[fromIssueIndex];
    var TempData = update(data, (_update = {}, _update[fromColumnIndex] = {
      issues: function issues(_issues) {
        return update(_issues, {
          $splice: [[fromIssueIndex, 1]]
        });
      }
    }, _update));
    TempData = update(TempData, (_update2 = {}, _update2[toColumnIndex] = {
      issues: function issues(_issues2) {
        return update(_issues2, {
          $splice: [[toIssueIndex, 0, TempIssue]]
        });
      }
    }, _update2));
    setData(TempData);
    setActiveColumn(null);
  };

  return /*#__PURE__*/React.createElement(DragDropContext, {
    onDragEnd: onDragEnd,
    onDragStart: onDragStart
  }, /*#__PURE__*/React.createElement("div", {
    className: 'container'
  }, data.map(function (column, index) {
    return /*#__PURE__*/React.createElement(Column, {
      columnIndex: index,
      key: column.id,
      activeColumn: activeColumn,
      column: column
    });
  })));
};

export default ReactDnd;