import React, { Fragment, useMemo } from 'react';
import classnames from 'classnames';
import Draggable from 'react-draggable';
import { useResize, X_AXIS_WIDTH, X_AXIS_WIDTH_MAX } from "./useResize";
import "./index.less";
export default function DragBar(_ref) {
  var parentRef = _ref.parentRef,
      store = _ref.store;

  var _useResize = useResize(parentRef, store),
      isDragging = _useResize.isDragging,
      bounds = _useResize.bounds,
      resizeNav = _useResize.resizeNav,
      draggable = _useResize.draggable,
      handleUnsetDrag = _useResize.handleUnsetDrag,
      handleStartDrag = _useResize.handleStartDrag,
      handleDrag = _useResize.handleDrag;

  var draggableClass = useMemo(function () {
    return classnames({
      'c7ncd-draggers-handle': true,
      'c7ncd-draggers-handle-dragged': isDragging
    });
  }, [isDragging]);
  var dragRight = resizeNav.x >= X_AXIS_WIDTH_MAX ? X_AXIS_WIDTH_MAX : bounds.width - X_AXIS_WIDTH;
  return /*#__PURE__*/React.createElement(Fragment, null, draggable && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Draggable, {
    axis: "x",
    position: resizeNav,
    bounds: {
      left: X_AXIS_WIDTH,
      right: dragRight,
      top: 0,
      bottom: 0
    },
    onStart: handleStartDrag,
    onDrag: handleDrag,
    onStop: handleUnsetDrag
  }, /*#__PURE__*/React.createElement("div", {
    className: draggableClass
  }, /*#__PURE__*/React.createElement("div", {
    className: "c7ncd-draggers-gun"
  }))), isDragging && /*#__PURE__*/React.createElement("div", {
    className: "c7ncd-draggers-blocker"
  })));
}