"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
require("./index.css");
const ResizeWidth = _ref => {
  let {
    minWidth,
    maxWidth,
    resizeWidth: resizeWidthAPI,
    resizeWidthEnd
  } = _ref;
  const [isShowHandlerBar, setIsShowHandlerBar] = (0, _react.useState)(false);
  const [drag, setDrag] = (0, _react.useState)(null);
  const handlerRef = (0, _react.useRef)(null);
  const handlerBarRef = (0, _react.useRef)(null);
  const setHandlerBarTop = handlerTop => {
    if (!handlerBarRef.current || handlerTop < 0) return;
    handlerBarRef.current.style.top = handlerTop + 'px';
  };
  const setHandlerBarPosition = event => {
    if (!handlerRef.current) return;
    const {
      top
    } = handlerRef.current.getBoundingClientRect();
    // 13 is the half of the handler's element height
    const handlerTop = event.pageY - top - 13;
    setHandlerBarTop(handlerTop);
  };
  const getWidthFromMouseEvent = event => {
    return event.pageX || event.touches && event.touches[0] && event.touches[0].pageX || event.changedTouches && event.changedTouches[event.changedTouches.length - 1].pageX;
  };
  const calculateResizedWidth = event => {
    const width = getWidthFromMouseEvent(event);
    const resizedWidth = document.body.clientWidth - width;
    if (minWidth && resizedWidth < minWidth || maxWidth && resizedWidth > maxWidth) return -1;
    return resizedWidth;
  };
  const onResizeWidth = event => {
    const resizedWidth = calculateResizedWidth(event);
    if (resizedWidth < 0) return;
    if (resizeWidthAPI) {
      resizeWidthAPI(resizedWidth);
    }
  };
  const onDrag = event => {
    onResizeWidth(event);
  };
  const onDragStart = (0, _react.useCallback)(event => {
    if (event && event.dataTransfer && event.dataTransfer.setData) {
      event.dataTransfer.setData('text/plain', 'dummy');
    }
    return true;
  }, []);
  const onDragEnd = event => {
    onResizeWidth(event);
  };
  const onMouseLeave = () => {
    setIsShowHandlerBar(false);
  };
  const onMouseEnter = event => {
    setIsShowHandlerBar(true);
    setHandlerBarPosition(event);
    if (handlerRef.current) {
      handlerRef.current.addEventListener('mouseleave', onMouseLeave);
    }
  };
  const onMouseOver = event => {
    setHandlerBarPosition(event);
  };
  const onMouseDown = event => {
    event.preventDefault && event.preventDefault();
    const currDrag = onDragStart(event);
    if (currDrag === null && event.button !== 0) return;
    window.addEventListener('mouseup', onMouseUp);
    window.addEventListener('mousemove', onMouseMove);
    if (handlerRef.current) {
      handlerRef.current.removeEventListener('mouseleave', onMouseLeave);
    }
    setDrag(currDrag);
  };
  const onMouseMove = event => {
    event.preventDefault && event.preventDefault();
    onDrag(event);
  };
  const onMouseUp = event => {
    window.removeEventListener('mouseup', onMouseUp);
    window.removeEventListener('mousemove', onMouseMove);
    onDragEnd(event, drag);
    setHandlerBarTop(-9999);
    setDrag(null);
    setIsShowHandlerBar(false);
    if (resizeWidthEnd) {
      const resizeWidth = calculateResizedWidth(event);
      if (resizeWidth < 0) return;
      resizeWidthEnd(resizeWidth);
    }
  };
  (0, _react.useEffect)(() => {
    return () => {
      window.removeEventListener('mouseup', onMouseUp);
      window.removeEventListener('mousemove', onMouseMove);
    };
    // eslint-disable-next-line
  }, []);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-editor-resize-width-handler resize-handler-placement-right",
    ref: handlerRef,
    onMouseDown: onMouseDown,
    onMouseOver: onMouseOver,
    onMouseEnter: onMouseEnter,
    onDrag: onDrag,
    onDragStart: onDragStart,
    onDragEnd: onDragEnd,
    style: {
      zIndex: 4
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-editor-resize-width-handler-content"
  }, isShowHandlerBar && /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-editor-resize-width-handler-bar",
    ref: handlerBarRef,
    style: {
      height: 26
    }
  })));
};
var _default = exports.default = ResizeWidth;