import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
import React, { useState, useEffect, useRef } from 'react';
import MoreVerticalOutlined from "mk-icon/es/icons/MoreVerticalOutlined";

var Dragger = function Dragger(_ref) {
  var drawerRef = _ref.drawerRef,
      onDragMove = _ref.onDragMove;
  var ref = useRef(null);

  var _useState = useState(0),
      _useState2 = _slicedToArray(_useState, 2),
      rightGap = _useState2[0],
      setRightGap = _useState2[1];

  useEffect(function () {
    var draggerDom = ref.current;
    if (!draggerDom) return;
    setRightGap(drawerRef.current.offsetWidth);

    draggerDom.onmousedown = function (event) {
      var firstX = event.clientX;
      var firstWidth = drawerRef.current.offsetWidth;

      document.onmousemove = function (e) {
        var nextWidth = Math.max(Math.min(firstWidth + firstX - e.clientX, 1100), 256);
        onDragMove(nextWidth);
        setRightGap(nextWidth);
      };

      document.onmouseup = function () {
        document.onmousemove = null;
      };
    };
  }, []);
  return /*#__PURE__*/React.createElement("div", {
    className: "mkui-drawer-dragger",
    style: {
      right: rightGap - 4
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "mkui-drawer-dragger-line"
  }), /*#__PURE__*/React.createElement("div", {
    ref: ref,
    className: "mkui-drawer-dragger-button"
  }, /*#__PURE__*/React.createElement(MoreVerticalOutlined, null)));
};

export default Dragger;