import { useEffect, useRef } from 'react';
import { useOpenClose } from './useOpenClose';
import { useFloatingElement } from './useFloatingElement';
export var CLICK_BUTTON = {
  LEFT: 'left',
  RIGHT: 'right'
};
function createVirtualElement() {
  var clientX = 0;
  var clientY = 0;
  var setClientPosition = function setClientPosition(event) {
    clientX = event.clientX;
    clientY = event.clientY;
  };
  var virtualElement = {
    getBoundingClientRect: function getBoundingClientRect() {
      return {
        top: clientY,
        right: clientX,
        bottom: clientY,
        left: clientX,
        width: 0,
        height: 0
      };
    }
  };
  return {
    virtualElement: virtualElement,
    setClientPosition: setClientPosition
  };
}
export var useClickMenu = function useClickMenu(_ref) {
  var attachedToRef = _ref.attachedToRef,
    clickType = _ref.clickType,
    initialIsOpen = _ref.initialIsOpen,
    onHide = _ref.onHide,
    onShow = _ref.onShow;
  var _useOpenClose = useOpenClose(initialIsOpen),
    open = _useOpenClose.open,
    setOpen = _useOpenClose.setOpen;
  var _useRef = useRef(createVirtualElement()),
    _useRef$current = _useRef.current,
    virtualElement = _useRef$current.virtualElement,
    setClientPosition = _useRef$current.setClientPosition;
  var _useFloatingElement = useFloatingElement('auto-end', 'fixed', virtualElement),
    targetElementRef = _useFloatingElement.targetElementRef,
    floatingElement = _useFloatingElement.floatingElement,
    floatingElementRef = _useFloatingElement.floatingElementRef,
    forceUpdate = _useFloatingElement.forceUpdate,
    arrowElementRef = _useFloatingElement.arrowElementRef,
    styles = _useFloatingElement.styles,
    attributes = _useFloatingElement.attributes;
  var displayMenu = function displayMenu(e) {
    var _attachedToRef$curren;
    if (!(e.target instanceof Node) || !((_attachedToRef$curren = attachedToRef.current) !== null && _attachedToRef$curren !== void 0 && _attachedToRef$curren.contains(e.target))) {
      if (open) {
        setOpen(false);
        onHide === null || onHide === void 0 ? void 0 : onHide(e);
      }
      return;
    }

    // Click was within bounds of target area
    e.preventDefault();
    e.stopPropagation();
    setClientPosition(e);
    setOpen(true);
    forceUpdate === null || forceUpdate === void 0 ? void 0 : forceUpdate();
    onShow === null || onShow === void 0 ? void 0 : onShow(e);
  };
  var hideMenu = function hideMenu(e) {
    if (!open || !floatingElement) {
      return;
    }
    if (e.target instanceof Node && floatingElement.contains(e.target)) {
      return;
    }
    setOpen(false);
    onHide === null || onHide === void 0 ? void 0 : onHide(e);
  };
  useEffect(function () {
    if (clickType === 'left') {
      document.addEventListener('click', displayMenu);
    }
    if (clickType === 'right') {
      document.addEventListener('contextmenu', displayMenu);
      document.addEventListener('click', hideMenu);
    }
    return function () {
      document.removeEventListener('contextmenu', displayMenu);
      document.removeEventListener('click', displayMenu);
      document.removeEventListener('click', hideMenu);
    };
  });
  useEffect(function () {
    document.body.style.overflow = open ? 'hidden' : 'auto';
  }, [open]);
  return {
    isOpen: open,
    targetElementRef: targetElementRef,
    floatingElement: floatingElement,
    floatingElementRef: floatingElementRef,
    arrowElementRef: arrowElementRef,
    styles: styles,
    attributes: attributes
  };
};