"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _react = _interopRequireWildcard(require("react"));

var _reactBeautifulDnd = require("react-beautiful-dnd");

var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"));

require("./index.scss");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

// import styles from './index.scss';
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["default"].createElement(_reactBeautifulDnd.Draggable, {
    draggableId: "" + id,
    index: issueIndex
  }, function (provided, snapshot) {
    return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
      ref: provided.innerRef,
      className: snapshot.isDragging ? 'issueDragging' : 'issue'
    }, provided.draggableProps, provided.dragHandleProps, {
      style: {
        backgroundColor: ''
      }
    }), /*#__PURE__*/_react["default"].createElement("div", null, taskName), /*#__PURE__*/_react["default"].createElement("div", {
      className: status == 0 ? 'error' : status == 1 ? 'warning' : status == 2 ? 'success' : 'error'
    }, status == 0 ? '未完成' : status == 1 ? '进行中' : status == 2 ? '已完成' : '无状态'), /*#__PURE__*/_react["default"].createElement("div", null, name), /*#__PURE__*/_react["default"].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["default"].createElement("div", {
    className: 'column'
  }, /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Droppable, {
    droppableId: "" + columnIndex,
    mode: "virtual",
    isDropDisabled: activeColumn ? !(activeColumn.acceptIds.includes(id) || id === activeColumn.id) : true
  }, function (provided, snapshot) {
    return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
      ref: provided.innerRef,
      className: snapshot.isDraggingOver ? 'columnContentActive' : 'columnContent'
    }, provided.droppableProps), issues.map(function (issue, index) {
      return /*#__PURE__*/_react["default"].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 = (0, _react.useState)(InitialData),
      data = _useState[0],
      setData = _useState[1];

  var _useState2 = (0, _react.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 = (0, _immutabilityHelper["default"])(data, (_update = {}, _update[fromColumnIndex] = {
      issues: function issues(_issues) {
        return (0, _immutabilityHelper["default"])(_issues, {
          $splice: [[fromIssueIndex, 1]]
        });
      }
    }, _update));
    TempData = (0, _immutabilityHelper["default"])(TempData, (_update2 = {}, _update2[toColumnIndex] = {
      issues: function issues(_issues2) {
        return (0, _immutabilityHelper["default"])(_issues2, {
          $splice: [[toIssueIndex, 0, TempIssue]]
        });
      }
    }, _update2));
    setData(TempData);
    setActiveColumn(null);
  };

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

var _default = ReactDnd;
exports["default"] = _default;