import React, { useState, useRef } from 'react';

interface DraggableWidgetProps {
  children: React.ReactNode;
}

/**
 * A draggable widget that can be used to create custom draggable components.
 */
export const DraggableWidget = (props: DraggableWidgetProps) => {
  const { children } = props;
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const widgetRef = useRef<HTMLDivElement>(null);

  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
    if (widgetRef.current) {
      const startX = e.clientX - widgetRef.current.offsetLeft;
      const startY = e.clientY - widgetRef.current.offsetTop;

      const handleMouseMove = (e: MouseEvent) => {
        const newPosX = e.clientX - startX;
        const newPosY = e.clientY - startY;
        setPosition({ x: newPosX, y: newPosY });
      };

      const handleMouseUp = () => {
        document.removeEventListener('mousemove', handleMouseMove);
        document.removeEventListener('mouseup', handleMouseUp);
      };

      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
    }
  };

  return (
    <div
      data-xray="DraggableWidget"
      ref={widgetRef}
      style={{ transform: `translate(${position.x}px, ${position.y}px)` }}
      onMouseDown={handleMouseDown}
    >
      {children}
    </div>
  );
};