"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _easingSt = require("../../../../Foundation/stylable/easing.st.css");
var _ = require("../../../..");
var _SingleAreaListWithAnimationSt = require("./SingleAreaListWithAnimation.st.css");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/DragAndDrop/docs/SortableListBase/SingleAreaListWithAnimation/SingleAreaListWithAnimation.jsx";
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var generateId = function generateId() {
  return Math.floor(Math.random() * 100000);
};
var SingleAreaListWithAnimation = exports["default"] = /*#__PURE__*/function (_React$Component) {
  function SingleAreaListWithAnimation() {
    var _this;
    (0, _classCallCheck2["default"])(this, SingleAreaListWithAnimation);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper(this, SingleAreaListWithAnimation, [].concat(args));
    _this.state = {
      items: [{
        id: generateId(),
        text: 'Item 1'
      }, {
        id: generateId(),
        text: 'Item 2'
      }, {
        id: generateId(),
        text: 'Item 3'
      }, {
        id: generateId(),
        text: 'Item 4'
      }, {
        id: generateId(),
        text: 'Item 5'
      }]
    };
    _this.handleDrop = function (_ref) {
      var removedIndex = _ref.removedIndex,
        addedIndex = _ref.addedIndex;
      var nextItems = (0, _toConsumableArray2["default"])(_this.state.items);
      nextItems.splice.apply(nextItems, [addedIndex, 0].concat((0, _toConsumableArray2["default"])(nextItems.splice(removedIndex, 1))));
      _this.setState({
        items: nextItems
      });
    };
    _this.renderItem = function (_ref2) {
      var isPlaceholder = _ref2.isPlaceholder,
        isPreview = _ref2.isPreview,
        id = _ref2.id,
        connectHandle = _ref2.connectHandle,
        item = _ref2.item;
      var _classes = (0, _classnames["default"])((0, _classnames["default"])(_.dndStyles.item, _SingleAreaListWithAnimationSt.classes.item), (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, (0, _classnames["default"])(_.dndStyles.itemPlaceholder, _SingleAreaListWithAnimationSt.classes.placeholder), isPlaceholder), (0, _classnames["default"])(_.dndStyles.itemPreview, _SingleAreaListWithAnimationSt.classes.preview), isPreview));
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: _classes,
        "data-hook": "item-".concat(id),
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 66,
          columnNumber: 7
        }
      }, item.text, _this.props.withHandle ? _this.renderHandle({
        connectHandle: connectHandle,
        id: id,
        isPlaceholder: isPlaceholder
      }) : null);
    };
    return _this;
  }
  (0, _inherits2["default"])(SingleAreaListWithAnimation, _React$Component);
  return (0, _createClass2["default"])(SingleAreaListWithAnimation, [{
    key: "renderHandle",
    value: function renderHandle(_ref3) {
      var connectHandle = _ref3.connectHandle,
        id = _ref3.id,
        isPlaceholder = _ref3.isPlaceholder;
      return connectHandle(/*#__PURE__*/_react["default"].createElement("div", {
        className: _SingleAreaListWithAnimationSt.classes.handle,
        style: {
          opacity: isPlaceholder ? 0 : 1
        },
        "data-hook": "card-".concat(id, "-handle"),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 45,
          columnNumber: 7
        }
      }, "Drag Handle"));
    }
  }, {
    key: "render",
    value: function render() {
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: _SingleAreaListWithAnimationSt.classes.root,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 77,
          columnNumber: 7
        }
      }, /*#__PURE__*/_react["default"].createElement("h3", {
        className: _SingleAreaListWithAnimationSt.classes.title,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 78,
          columnNumber: 9
        }
      }, "Draggable Area"), /*#__PURE__*/_react["default"].createElement(_.SortableListBase, {
        withHandle: this.props.withHandle,
        className: _SingleAreaListWithAnimationSt.classes.sortableListBase,
        containerId: "single-area-1",
        dataHook: "list-single-area",
        items: this.state.items,
        renderItem: this.renderItem,
        onDrop: this.handleDrop,
        animationDuration: 500,
        animationTiming: _easingSt.stVars['ease-7'],
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 79,
          columnNumber: 9
        }
      }));
    }
  }]);
}(_react["default"].Component);