import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef, useState, useEffect } from "react";
import { createPortal } from "react-dom";
import { Copy } from "lucide-react";
export function CopyButton({ textToCopy, duration = 2000, className, children, iconOnly = false, "data-testid": dataTestId, }) {
    const [showCopiedHint, setShowCopiedHint] = useState(false);
    const buttonRef = useRef(null);
    // Add keyframes to document head once
    useEffect(() => {
        const styleId = "copy-button-animations";
        if (document.getElementById(styleId))
            return;
        const style = document.createElement("style");
        style.id = styleId;
        style.textContent = `
      @keyframes shake {
        0%, 100% { transform: translateX(-50%) rotate(0deg); }
        10% { transform: translateX(-50%) rotate(-2deg) scale(1.05); }
        20% { transform: translateX(-50%) rotate(2deg) scale(1.1); }
        30% { transform: translateX(-50%) rotate(-2deg) scale(1.05); }
        40% { transform: translateX(-50%) rotate(2deg) scale(1.1); }
        50% { transform: translateX(-50%) rotate(-1deg) scale(1.02); }
        60% { transform: translateX(-50%) rotate(1deg) scale(1.02); }
        70% { transform: translateX(-50%) rotate(-1deg); }
        80% { transform: translateX(-50%) rotate(1deg); }
        90% { transform: translateX(-50%) rotate(0deg); }
      }
      @keyframes fadeOut {
        0% { opacity: 1; }
        70% { opacity: 1; }
        100% { opacity: 0; }
      }
    `;
        document.head.appendChild(style);
    }, []);
    const handleCopy = async (event) => {
        event.stopPropagation();
        try {
            await navigator.clipboard.writeText(textToCopy);
            setShowCopiedHint(true);
            setTimeout(() => setShowCopiedHint(false), duration);
        }
        catch (error) {
            console.error("Failed to copy text:", error);
        }
    };
    const Element = iconOnly ? "span" : "button";
    const defaultClassName = iconOnly
        ? "cursor-pointer"
        : "text-neutral-grey-100 flex cursor-pointer items-center gap-1 p-0 text-xs";
    const defaultChildren = iconOnly ? (_jsx(Copy, { strokeWidth: 1, className: "h-3 w-3" })) : (_jsxs(_Fragment, { children: [_jsx(Copy, { strokeWidth: 1, className: "h-3 w-3" }), " Copy"] }));
    return (_jsxs(_Fragment, { children: [_jsx(Element, { ref: buttonRef, onClick: handleCopy, className: className || defaultClassName, "data-testid": dataTestId, children: children || defaultChildren }), showCopiedHint &&
                buttonRef.current &&
                createPortal(_jsx("div", { className: "bg-neutral-grey-100 badge-pad pointer-events-none fixed z-[9999] rounded text-xs whitespace-nowrap text-white shadow-lg", style: {
                        animation: "shake 0.5s ease-in-out, fadeOut 2s ease-out forwards",
                        left: buttonRef.current.getBoundingClientRect().left +
                            buttonRef.current.offsetWidth / 2,
                        top: buttonRef.current.getBoundingClientRect().top - 32,
                        transform: "translateX(-50%)",
                    }, children: "Copied!" }), document.body)] }));
}
//# sourceMappingURL=copy-button.js.map