"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getDraggingStyle = exports.getBackgroundColor = exports["default"] = void 0;

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

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

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

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

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

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

var _reactDom = require("react-dom");

var _reactVirtualized = require("react-virtualized");

var _mobxReactLite = require("mobx-react-lite");

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

var _isFunction = _interopRequireDefault(require("lodash/isFunction"));

var _grid = require("../../../lib/grid");

var _classnames = _interopRequireDefault(require("classnames"));

var _QuoteItem = _interopRequireDefault(require("./QuoteItem"));

var _dataSet = _interopRequireDefault(require("../data-set"));

var _BoardContext = _interopRequireDefault(require("./BoardContext"));

var _enum = require("./enum");

var _button = _interopRequireDefault(require("../button"));

var _interface = require("../button/interface");

// import noop from 'lodash/noop';
var getBackgroundColor = function getBackgroundColor(isDraggingOver, isDraggingFrom) {
  if (isDraggingOver) {
    return 'rgb(222, 235, 255)';
  }

  if (isDraggingFrom) {
    return "rgb(255, 250, 230)";
  }

  return "white";
};

exports.getBackgroundColor = getBackgroundColor;

var getDraggingStyle = function getDraggingStyle(isDraggingOver, isDraggingFrom) {
  if (isDraggingOver) {
    return {
      background: 'rgba(8,64,248,0.02)',
      border: '1px dashed #82ACFF',
      borderRadius: '2px'
    };
  }

  if (isDraggingFrom) {
    return {
      background: 'rgba(8,64,248,0.02)',
      border: '1px dashed #82ACFF',
      borderRadius: '2px'
    };
  }

  return {
    background: 'white'
  };
}; // Using a higher order function so that we can look up the quotes data to retrieve
// our quote from within the rowRender function


exports.getDraggingStyle = getDraggingStyle;

var getRowRender = function getRowRender(quotes, columnId, prefixCls, viewProps, listDragging, command, renderCommand, dataSet, kanbanDS, displayFields, draggableProps, isDragDropDisabled) {
  return function (_ref) {
    var index = _ref.index,
        style = _ref.style;
    var quote = quotes.get(index);
    var isLast = quotes && quotes.length === index + 1; // We are rendering an extra item for the placeholder
    // Do do this we increased our data set size to include one 'fake' item

    if (!quote) {
      return null;
    } // Faking some nice spacing around the items


    var patchedStyle = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), {}, {
      left: Number(style.left) + 8,
      top: Number(style.top) + 8,
      width: "calc(".concat(style.width, " - ").concat(8 * 2, "px)"),
      height: Number(style.height) - (isLast && !listDragging ? 46 : 8)
    });
    var btnStyle = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), {}, {
      left: Number(style.left) + 8,
      top: Number(style.top) + Number(style.height) - 28,
      width: "calc(".concat(style.width, " - ").concat(8 * 2, "px)"),
      maxWidth: 'unset',
      height: 28
    });

    var restDraggableProps = function restDraggableProps() {
      if ((0, _isFunction["default"])(draggableProps)) {
        return draggableProps({
          columnDS: quotes,
          dataSet: dataSet
        });
      }

      return draggableProps;
    };

    return /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Draggable, (0, _extends2["default"])({
      draggableId: String(quote.id),
      index: index,
      key: quote.id,
      isDragDisabled: isDragDropDisabled && true
    }, restDraggableProps()), function (provided, snapshot) {
      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_QuoteItem["default"], {
        command: command,
        renderCommand: renderCommand,
        provided: provided,
        quote: quote,
        isDragging: snapshot.isDragging,
        style: patchedStyle,
        prefixCls: prefixCls,
        viewProps: viewProps,
        displayFields: displayFields,
        index: index,
        dataSet: quotes
      }), isLast && (kanbanDS.getState("".concat(columnId, "_totalCount")) || quotes.totalCount) > quotes.length ? /*#__PURE__*/_react["default"].createElement(_button["default"], {
        onClick: function () {
          var _onClick = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
            return _regenerator["default"].wrap(function _callee$(_context) {
              while (1) {
                switch (_context.prev = _context.next) {
                  case 0:
                    _context.next = 2;
                    return quotes.queryMore(quotes.currentPage + 1, undefined);

                  case 2:
                    kanbanDS.setState("".concat(columnId, "_totalCount"), undefined);

                  case 3:
                  case "end":
                    return _context.stop();
                }
              }
            }, _callee);
          }));

          function onClick() {
            return _onClick.apply(this, arguments);
          }

          return onClick;
        }(),
        style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, btnStyle), {}, {
          maxWidth: 'unset'
        }),
        hidden: listDragging,
        funcType: _interface.FuncType.flat
      }, "\u52A0\u8F7D\u66F4\u591A") : null);
    });
  };
};

var KanbanColumn = function KanbanColumn(props) {
  var columnId = props.columnId,
      _props$quotes = props.quotes,
      quotes = _props$quotes === void 0 ? [] : _props$quotes,
      prefixCls = props.prefixCls,
      className = props.className,
      header = props.header,
      style = props.style,
      kanbanProps = props.kanbanProps,
      kanbanDS = props.kanbanDS,
      groupingBy = props.groupingBy;
  var droppableProps = kanbanProps.droppableProps,
      draggableProps = kanbanProps.draggableProps,
      isDragDropDisabled = kanbanProps.isDragDropDisabled;

  var _useContext = (0, _react.useContext)(_BoardContext["default"]),
      displayFields = _useContext.displayFields,
      customizedDS = _useContext.customizedDS,
      command = _useContext.command,
      renderCommand = _useContext.renderCommand,
      dataSet = _useContext.dataSet;

  var viewProps = (0, _react.useMemo)(function () {
    return customizedDS.current.get(_enum.ViewField.viewProps) || {};
  }, [customizedDS.current]);
  var columnDS = (0, _react.useMemo)(function () {
    return new _dataSet["default"]((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, dataSet.props), {}, {
      queryParameter: (0, _defineProperty2["default"])({}, groupingBy, columnId === '_empty' ? 'null' : columnId),
      data: quotes.slice(),
      autoQuery: false
    }, kanbanProps.columnDsProps));
  }, [quotes]);
  var defaultRowHeight = (0, _react.useMemo)(function () {
    return (viewProps[_enum.ViewField.displayFields] ? viewProps[_enum.ViewField.displayFields].length : 1) * 24 + 30 + 24;
  }, [viewProps[_enum.ViewField.displayFields] && viewProps[_enum.ViewField.displayFields].length]);
  var totalCount = (0, _react.useMemo)(function () {
    return Math.max(kanbanDS.getState("".concat(columnId, "_totalCount")) || 0, columnDS.totalCount);
  }, [columnId, columnDS.totalCount]);
  (0, _react.useEffect)(function () {
    if (kanbanDS) {
      kanbanDS.setState("".concat(columnId.toString().toLocaleUpperCase(), "_COLUMNDS"), columnDS);
    }
  }, [kanbanDS, columnDS]);
  var restDroppableProps = (0, _react.useCallback)(function () {
    if ((0, _isFunction["default"])(droppableProps)) {
      return droppableProps({
        columnDS: columnDS,
        dataSet: dataSet
      });
    }

    return droppableProps;
  }, []);
  var cls = (0, _classnames["default"])("".concat(prefixCls, "-column-container"), {}, className);
  return /*#__PURE__*/_react["default"].createElement(_grid.Col, {
    span: viewProps[_enum.ViewField.cardWidth] || 6,
    "data-key": viewProps[_enum.ViewField.displayFields] && viewProps[_enum.ViewField.displayFields].length,
    style: style,
    className: cls
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(prefixCls, "-column-header")
  }, /*#__PURE__*/_react["default"].createElement("span", null, header), /*#__PURE__*/_react["default"].createElement("span", {
    className: "".concat(prefixCls, "-column-header-count")
  }, "(", columnDS ? totalCount : 0, ")")), /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Droppable, (0, _extends2["default"])({
    droppableId: columnId.toString(),
    mode: "virtual",
    renderClone: function renderClone(provided, snapshot, rubric) {
      return /*#__PURE__*/_react["default"].createElement(_QuoteItem["default"], {
        prefixCls: prefixCls,
        provided: provided,
        isDragging: snapshot.isDragging,
        quote: columnDS.get(rubric.source.index),
        style: {
          margin: 0
        },
        viewProps: viewProps,
        displayFields: displayFields,
        command: command,
        renderCommand: renderCommand,
        dataSet: columnDS
      });
    },
    isDropDisabled: isDragDropDisabled && true
  }, restDroppableProps()), function (droppableProvided, snapshot) {
    var itemCount = columnDS ? snapshot.isUsingPlaceholder ? columnDS.length + 1 : columnDS.length : 0;
    return /*#__PURE__*/_react["default"].createElement(_reactVirtualized.AutoSizer, {
      disableHeight: true
    }, function (_ref2) {
      var width = _ref2.width;
      return /*#__PURE__*/_react["default"].createElement(_reactVirtualized.List, {
        className: "".concat(prefixCls, "-column-list"),
        height: viewProps.viewHeight || 366,
        rowCount: itemCount,
        rowHeight: function rowHeight(_ref3) {
          var index = _ref3.index;
          return itemCount - 1 === index ? defaultRowHeight + 36 : defaultRowHeight;
        },
        width: width,
        ref: function ref(_ref4) {
          // react-virtualized has no way to get the list's ref that I can so
          // So we use the `ReactDOM.findDOMNode(ref)` escape hatch to get the ref
          // listRef = ref;
          if (_ref4) {
            _ref4.recomputeRowHeights(); // columnDS.setState('__REF__', ref);
            // eslint-disable-next-line react/no-find-dom-node


            var nodeRef = (0, _reactDom.findDOMNode)(_ref4);

            if (nodeRef instanceof HTMLElement) {
              droppableProvided.innerRef(nodeRef);
            }
          }
        },
        style: getDraggingStyle(snapshot.isDraggingOver, Boolean(snapshot.draggingFromThisWith)),
        // style={{
        //   backgroundColor: getBackgroundColor(
        //     snapshot.isDraggingOver,
        //     Boolean(snapshot.draggingFromThisWith),
        //   ),
        //   transition: 'background-color 0.2s ease',
        // }}
        rowRenderer: columnDS ? getRowRender(columnDS, columnId, prefixCls, viewProps, snapshot.isDraggingOver || Boolean(snapshot.draggingFromThisWith), command, renderCommand, dataSet, kanbanDS, displayFields, draggableProps, isDragDropDisabled) : null
      });
    });
  }));
};

KanbanColumn.displayName = 'KanbanColumn';

var _default = (0, _mobxReactLite.observer)(KanbanColumn);

exports["default"] = _default;
//# sourceMappingURL=KanbanColumn.js.map
