var _extends = require("@babel/runtime/helpers/extends");
var _toConsumableArray = require("@babel/runtime/helpers/toConsumableArray");
var _classCallCheck = require("@babel/runtime/helpers/classCallCheck");
var _createClass = require("@babel/runtime/helpers/createClass");
var _possibleConstructorReturn = require("@babel/runtime/helpers/possibleConstructorReturn");
var _getPrototypeOf = require("@babel/runtime/helpers/getPrototypeOf");
var _inherits = require("@babel/runtime/helpers/inherits");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/SortableListBase/docs/examples/SortableItemsListWithDragHandle.jsx";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
/* eslint no-undef: "off", react/react-in-jsx-scope: "off", react/jsx-no-undef: "off" */
var SortableItemsListWithDragHandle = /*#__PURE__*/function (_React$Component) {
  "use strict";

  function SortableItemsListWithDragHandle() {
    var _this;
    _classCallCheck(this, SortableItemsListWithDragHandle);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper(this, SortableItemsListWithDragHandle, [].concat(args));
    _this.state = {
      items: new Array(5).fill().map(function (x, i) {
        return {
          id: "example2-".concat(i),
          text: "Item ".concat(i)
        };
      })
    };
    _this._itemStyleProps = {
      common: {
        boxSizing: 'border-box',
        width: '240px',
        height: '36px',
        backgroundColor: 'WHITE',
        borderWidth: '1px',
        borderStyle: 'solid',
        borderColor: 'B20',
        borderRadius: '6px',
        verticalAlign: 'middle',
        paddingLeft: '12px',
        marginBottom: '12px'
      },
      regular: {
        backgroundColor: 'WHITE'
      },
      placeholder: {
        borderStyle: 'none',
        backgroundColor: 'B50'
      },
      preview: {
        backgroundColor: 'B50'
      }
    };
    _this._handleDrop = function (_ref) {
      var removedIndex = _ref.removedIndex,
        addedIndex = _ref.addedIndex;
      var nextItems = _toConsumableArray(_this.state.items);
      nextItems.splice.apply(nextItems, [addedIndex, 0].concat(_toConsumableArray(nextItems.splice(removedIndex, 1))));
      _this.setState({
        items: nextItems
      });
    };
    _this._renderItem = function (_ref2) {
      var isPlaceholder = _ref2.isPlaceholder,
        isPreview = _ref2.isPreview,
        item = _ref2.item,
        connectHandle = _ref2.connectHandle;
      var styles = {};
      if (isPlaceholder) {
        styles = _this._itemStyleProps.placeholder;
      } else if (isPreview) {
        styles = _this._itemStyleProps.preview;
      } else {
        styles = _this._itemStyleProps.regular;
      }
      return /*#__PURE__*/React.createElement("div", {
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 54,
          columnNumber: 7
        }
      }, /*#__PURE__*/React.createElement(Box, _extends({}, _this._itemStyleProps.common, styles, {
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 55,
          columnNumber: 9
        }
      }), connectHandle(/*#__PURE__*/React.createElement("div", {
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 57,
          columnNumber: 13
        }
      }, /*#__PURE__*/React.createElement(Box, {
        marginRight: "12px",
        opacity: isPlaceholder ? 0 : 1,
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 58,
          columnNumber: 15
        }
      }, /*#__PURE__*/React.createElement(SystemIcons.DragAndDropSmall, {
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 59,
          columnNumber: 17
        }
      })))), !isPlaceholder && /*#__PURE__*/React.createElement(Text, {
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 63,
          columnNumber: 30
        }
      }, item.text)));
    };
    return _this;
  }
  _inherits(SortableItemsListWithDragHandle, _React$Component);
  return _createClass(SortableItemsListWithDragHandle, [{
    key: "render",
    value: function render() {
      return /*#__PURE__*/React.createElement(SortableListBase, {
        withHandle: true,
        containerId: "single-area-2",
        items: this.state.items,
        renderItem: this._renderItem,
        onDrop: this._handleDrop,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 71,
          columnNumber: 7
        }
      });
    }
  }]);
}(React.Component);