import Icon, { SizeProp, ThickProp } from "../Icon/Icon";
import Tooltip from "../Tooltip/Tooltip";
import IconProp from "../../../Types/Icon/IconProp";
import React, { useState } from "react";
const CopyableButton = (props) => {
    const [copiedToClipboard, setCopyToClipboard] = useState(false);
    const refreshCopyToClipboardState = () => {
        setCopyToClipboard(true);
        setTimeout(() => {
            setCopyToClipboard(false);
        }, 2000);
    };
    const handleCopy = async () => {
        var _a;
        refreshCopyToClipboardState();
        await ((_a = navigator.clipboard) === null || _a === void 0 ? void 0 : _a.writeText(props.textToBeCopied));
    };
    const handleKeyDown = async (event) => {
        if (event.key === "Enter" || event.key === " ") {
            event.preventDefault();
            await handleCopy();
        }
    };
    return (React.createElement("div", { className: `${copiedToClipboard ? "" : "cursor-pointer mt-0.5"} flex ml-1 text-gray-500`, onClick: handleCopy, onKeyDown: handleKeyDown, role: "button", tabIndex: 0, "aria-label": copiedToClipboard ? "Copied to clipboard" : "Copy to clipboard", "aria-live": "polite" },
        " ",
        copiedToClipboard ? ("Copied to Clipboard") : (React.createElement(Tooltip, { text: "Copy to Clipboard" },
            React.createElement(Icon, { className: "h-4 w-4", "data-testid": "copy-to-clipboard-icon", icon: IconProp.Copy, size: SizeProp.Small, thick: ThickProp.Thick }))),
        " "));
};
export default CopyableButton;
//# sourceMappingURL=CopyableButton.js.map