import { useEffect, useRef } from 'react';

export const useDragAndDrop = () => {
  const underlayRef = useRef<HTMLDivElement>(null);
  const draggableRef = useRef<HTMLDivElement>(null);
  const triggerRef = useRef<HTMLDivElement>(null);

  const onMouseDown = (ev: MouseEvent) => {
    ev.preventDefault();
    if (!underlayRef.current) return;
    underlayRef.current.style.display = 'block';
    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);
  };
  const onMouseMove = (ev: MouseEvent) => {
    const draggable = draggableRef.current;
    const trigger = triggerRef.current;
    if (!draggable || !trigger) return;
    const { clientX, clientY } = ev;
    const style = window.getComputedStyle(draggable);
    const marginTop = parseInt(style.getPropertyValue('margin-top'), 10);

    draggable.style.left = clientX - trigger.clientWidth / 2 + 'px';
    draggable.style.top = clientY - trigger.clientHeight / 2 - marginTop + 'px';

    // if (width + clientX <= window.innerWidth && clientX >= 20) {
    //   draggable.style.left = clientX - 20 + 'px';
    // }
    // if (height + clientY <= window.innerHeight && clientY >= 20) {
    //   draggable.style.top = clientY + 'px';
    // }
  };
  const onMouseUp = (ev: MouseEvent) => {
    ev && document.removeEventListener('mousemove', onMouseMove);
    if (!underlayRef.current) return;
    underlayRef.current.style.display = 'none';
  };

  useEffect(() => {
    const draggable = draggableRef.current;
    const trigger = triggerRef.current;
    if (draggable && trigger) {
      trigger.addEventListener('mousedown', onMouseDown);
      trigger.style.cursor = 'pointer';
      const underlay = document.getElementById('drag-and-drop-underlay') as HTMLDivElement;
      underlayRef.current = underlay || createUnderlay();
      document.body.appendChild(underlayRef.current);
    }
  }, [draggableRef]);

  return { draggableRef, triggerRef };
};

const createUnderlay = () => {
  const underlay = document.createElement('div');
  underlay.id = 'drag-and-drop-underlay';
  underlay.style.position = 'fixed';
  underlay.style.top = '0';
  underlay.style.left = '0';
  underlay.style.width = '100vw';
  underlay.style.height = '100vh';
  underlay.style.backgroundColor = 'rgba(0,0,0,0.0)';
  underlay.style.zIndex = '50';
  underlay.style.display = 'none';
  return underlay as HTMLDivElement;
};

export type UseDragAndDropHook = ReturnType<typeof useDragAndDrop>;
