import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useState } from "react";
import { ArrowDownLeft, ChevronDown } from "lucide-react";
export default function FloatingToolbar({ children, onPin, height, width, }) {
    const [position, setPosition] = useState({ x: 0, y: 95 });
    const [size, setSize] = useState({ width: 400, height: 70 });
    const [dragging, setDragging] = useState(false);
    const [resizing, setResizing] = useState(false);
    const [offset, setOffset] = useState({ x: 0, y: 0 });
    const [hidden, setHidden] = useState(false);
    useEffect(() => {
        console.log("WIDTH: ", width, "Height: ", height);
        setSize({ width: width || 400, height: height || 70 });
    }, []);
    const handleMouseDown = useCallback((e) => {
        // Start dragging and calculate the offset from the mouse to the sidebar top-left corner
        setDragging(true);
        setOffset({
            x: e.clientX - position.x,
            y: e.clientY - position.y,
        });
    }, [position]);
    const handleMouseMove = useCallback((e) => {
        if (dragging) {
            // Update the position state based on mouse movement, adjusted by the initial offset
            setPosition({
                x: e.clientX - offset.x,
                y: e.clientY - offset.y,
            });
        }
    }, [dragging, offset]);
    const handleMouseUp = useCallback(() => {
        // Stop dragging
        setDragging(false);
    }, []);
    const handleResizeMouseDown = useCallback((e) => {
        e.preventDefault();
        setResizing(true);
        setOffset({
            x: e.clientX,
            y: e.clientY,
        });
    }, []);
    const handleResizeMouseMove = useCallback((e) => {
        if (resizing) {
            const newWidth = size.width + (e.clientX - offset.x);
            const newHeight = size.height + (e.clientY - offset.y);
            setSize({
                width: newWidth > 200 ? newWidth : 200, // Minimum width
                height: newHeight > 100 ? newHeight : 100, // Minimum height
            });
            setOffset({
                x: e.clientX,
                y: e.clientY,
            });
        }
    }, [resizing, offset, size]);
    const handleResizeMouseUp = useCallback(() => {
        setResizing(false);
    }, []);
    useEffect(() => {
        if (resizing) {
            document.addEventListener("mousemove", handleResizeMouseMove);
            document.addEventListener("mouseup", handleResizeMouseUp);
        }
        return () => {
            document.removeEventListener("mousemove", handleResizeMouseMove);
            document.removeEventListener("mouseup", handleResizeMouseUp);
        };
    }, [resizing, handleResizeMouseMove, handleResizeMouseUp]);
    // Add event listeners to the document when the sidebar is being dragged
    useEffect(() => {
        if (dragging) {
            document.addEventListener("mousemove", handleMouseMove);
            document.addEventListener("mouseup", handleMouseUp);
        }
        // Cleanup the document event listeners when the component unmounts or dragging stops
        return () => {
            document.removeEventListener("mousemove", handleMouseMove);
            document.removeEventListener("mouseup", handleMouseUp);
        };
    }, [dragging, handleMouseMove, handleMouseUp]);
    return (_jsxs("div", { className: "z-10 flex flex-col border border-gray-200 drop-shadow", onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, style: {
            left: `${position.x}px`,
            top: `${position.y}px`,
            position: "absolute", // Use 'fixed' or 'absolute' depending on your layout needs
            height: `${hidden ? 30 : size.height}px`,
            width: `${size.width}px`,
        }, children: [_jsxs("div", { className: "items-between flex w-full justify-between bg-gray-100 p-2 text-sm", style: { cursor: "move", userSelect: "none" }, onMouseDown: handleMouseDown, children: ["Toolbar", _jsxs("div", { className: "flex gap-2", children: [hidden && (_jsx("div", { className: "cusor-pointer h-4 w-4 border-2 border-gray-800", onClick: () => setHidden(false) })), !hidden && (_jsx("div", { className: "cusor-pointer h-4 w-4 border-b-2 border-gray-800", onClick: () => setHidden(true) })), onPin && (_jsx(ArrowDownLeft, { className: "h-4 w-4 cursor-pointer", onClick: onPin }))] })] }), _jsx("div", { className: "flex-1", children: !hidden && children }), _jsx("div", { className: "h-4 bg-gray-100" }), _jsx("div", { className: "absolute -right-2 -bottom-1 h-4 w-4 cursor-nwse-resize text-gray-500", onMouseDown: handleResizeMouseDown, children: _jsx(ChevronDown, { className: "h-4 w-4 -rotate-45" }) })] }));
}
//# sourceMappingURL=FloatingToolbar.js.map