import { onBeforeUnmount, ref, watch } from 'vue';
function getPosition(e) {
  const obj = 'touches' in e ? e.touches[0] : e;
  const scrollXOffset = document.documentElement.scrollLeft || document.body.scrollLeft || window.pageXOffset;
  const scrollYOffset = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
  return {
    pageX: obj.pageX - scrollXOffset,
    pageY: obj.pageY - scrollYOffset
  };
}
function useColorDrag(props) {
  const offsetValue = ref({
    x: 0,
    y: 0
  });
  let mouseMoveEvent = null;
  let mouseUpEvent = null;
  watch(() => {
    var _a;
    return (_a = props.color) === null || _a === void 0 ? void 0 : _a.value;
  }, () => {
    offsetValue.value = props.calculate();
  }, {
    immediate: true
  });
  onBeforeUnmount(() => {
    document.removeEventListener('mousemove', mouseMoveEvent);
    document.removeEventListener('mouseup', mouseUpEvent);
    document.removeEventListener('touchmove', mouseMoveEvent);
    document.removeEventListener('touchend', mouseUpEvent);
    mouseMoveEvent = null;
    mouseUpEvent = null;
  });
  const updateOffset = e => {
    var _a, _b, _c, _d;
    const {
      pageX,
      pageY
    } = getPosition(e);
    const {
      x: rectX,
      y: rectY,
      width,
      height
    } = (_a = props.containerRef) === null || _a === void 0 ? void 0 : _a.value.getBoundingClientRect();
    const {
      width: targetWidth,
      height: targetHeight
    } = (_b = props.targetRef) === null || _b === void 0 ? void 0 : _b.value.getBoundingClientRect();
    const centerOffsetX = targetWidth / 2;
    const centerOffsetY = targetHeight / 2;
    const offsetX = Math.max(0, Math.min(pageX - rectX, width)) - centerOffsetX;
    const offsetY = Math.max(0, Math.min(pageY - rectY, height)) - centerOffsetY;
    const calcOffset = {
      x: offsetX,
      y: ((_c = props.direction) === null || _c === void 0 ? void 0 : _c.value) === 'x' ? offsetValue.value.y : offsetY
    };
    if (targetWidth === 0 && targetHeight === 0 || targetWidth !== targetHeight) {
      return false;
    }
    (_d = props.onDragChange) === null || _d === void 0 ? void 0 : _d.call(props, calcOffset);
  };
  const onDragMove = e => {
    e.preventDefault();
    updateOffset(e);
  };
  const onDragStop = e => {
    var _a;
    e.preventDefault();
    document.removeEventListener('mousemove', mouseMoveEvent);
    document.removeEventListener('mouseup', mouseUpEvent);
    document.removeEventListener('touchmove', mouseMoveEvent);
    document.removeEventListener('touchend', mouseUpEvent);
    mouseMoveEvent = null;
    mouseUpEvent = null;
    (_a = props.onDragChangeComplete) === null || _a === void 0 ? void 0 : _a.call(props);
  };
  const onDragStart = e => {
    var _a;
    document.removeEventListener('mousemove', mouseMoveEvent);
    document.removeEventListener('mouseup', mouseUpEvent);
    if ((_a = props.disabledDrag) === null || _a === void 0 ? void 0 : _a.value) {
      return;
    }
    updateOffset(e);
    document.addEventListener('mousemove', onDragMove);
    document.addEventListener('mouseup', onDragStop);
    document.addEventListener('touchmove', onDragMove);
    document.addEventListener('touchend', onDragStop);
    mouseMoveEvent = onDragMove;
    mouseUpEvent = onDragStop;
  };
  return [offsetValue, onDragStart];
}
export default useColorDrag;