import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/DragAndDrop/docs/SortableListBase/NestableListBaseExample/NestableListBaseExample.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; })(); }
import React from 'react';
import classNames from 'classnames';
import { dndStyles as defaultDndStyles, NestableListBase, DragDropContextProvider } from '../../../..';
import { classes } from './NestableListBase.st.css';
var NestableListBaseExample = /*#__PURE__*/function (_React$Component) {
  function NestableListBaseExample() {
    var _this;
    _classCallCheck(this, NestableListBaseExample);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper(this, NestableListBaseExample, [].concat(args));
    _this.state = {
      items: [{
        id: 1,
        text: 'Item #1 pinned',
        isPinned: true,
        children: []
      }, {
        id: 10,
        text: 'Item #10 pinned',
        isPinned: true,
        children: []
      }, {
        id: 2,
        text: 'Item #2 - lock drop area',
        children: [],
        lockDropArea: true
      }, {
        id: 3,
        text: 'Item #3',
        children: []
      }, {
        id: 4,
        text: 'Item #4',
        children: [{
          id: 5,
          text: 'Item #5 - lock drop area',
          lockDropArea: true,
          children: [{
            id: 6,
            text: 'Item #6 - undraggable item',
            draggable: false
          }]
        }]
      }, {
        id: 7,
        text: 'Item #7',
        children: [{
          id: 8,
          text: 'Item #8 - prevent item change depth',
          children: [],
          preventItemChangeDepth: true
        }, {
          id: 9,
          text: 'Item #9',
          children: []
        }]
      }]
    };
    _this.onUpdate = function (_ref) {
      var items = _ref.items;
      _this.setState({
        items: items
      });
    };
    _this.renderItem = function (_ref2) {
      var isPlaceholder = _ref2.isPlaceholder,
        depth = _ref2.depth,
        isPreview = _ref2.isPreview,
        connectDragSource = _ref2.connectDragSource,
        item = _ref2.item;
      var _classes = classNames(classNames(defaultDndStyles.item, classes.itemCss), _defineProperty(_defineProperty({}, classNames(defaultDndStyles.itemPlaceholder, classes.placeholder), isPlaceholder), classNames(defaultDndStyles.itemPreview, classes.preview), isPreview));
      return /*#__PURE__*/React.createElement("div", {
        className: _classes,
        "data-hook": "item-".concat(item.id, "-").concat(depth),
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 92,
          columnNumber: 7
        }
      }, item.text, connectDragSource(_this.renderHandle({
        id: item.id,
        isPlaceholder: isPlaceholder
      })));
    };
    return _this;
  }
  _inherits(NestableListBaseExample, _React$Component);
  return _createClass(NestableListBaseExample, [{
    key: "renderHandle",
    value: function renderHandle(_ref3) {
      var id = _ref3.id,
        isPlaceholder = _ref3.isPlaceholder;
      return /*#__PURE__*/React.createElement("div", {
        className: classes.handle,
        style: {
          opacity: isPlaceholder ? 0 : 1
        },
        "data-hook": "card-".concat(id, "-handle"),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 65,
          columnNumber: 7
        }
      }, "Drag Handle");
    }
  }, {
    key: "render",
    value: function render() {
      return /*#__PURE__*/React.createElement(DragDropContextProvider, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 101,
          columnNumber: 7
        }
      }, /*#__PURE__*/React.createElement("div", {
        className: classes.root,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 102,
          columnNumber: 9
        }
      }, /*#__PURE__*/React.createElement("h3", {
        className: classes.title,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 103,
          columnNumber: 11
        }
      }, "Draggable Area"), /*#__PURE__*/React.createElement(NestableListBase, {
        theme: classes,
        useDragHandle: true,
        items: this.state.items,
        renderItem: this.renderItem,
        onUpdate: this.onUpdate,
        maxDepth: 3,
        threshold: 30,
        childrenStyle: stylesExp.children,
        childrenProperty: "children",
        isRenderDraggingChildren: false,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 104,
          columnNumber: 11
        }
      })));
    }
  }]);
}(React.Component);
export { NestableListBaseExample as default };
var stylesExp = {
  children: {
    marginLeft: 50
  }
};