import Icon, { SizeProp, ThickProp } from "../Icon/Icon";
import Tooltip from "../Tooltip/Tooltip";
import IconProp from "../../../Types/Icon/IconProp";
import React, { useState } from "react";
const HiddenText = (props) => {
    const [showText, setShowText] = useState(false);
    const [copied, setCopied] = useState(false);
    const handleCopy = async () => {
        var _a;
        await ((_a = navigator.clipboard) === null || _a === void 0 ? void 0 : _a.writeText(props.text));
        setCopied(true);
        setTimeout(() => {
            setCopied(false);
        }, 2000);
    };
    if (!showText) {
        return (React.createElement("div", { role: "hidden-text", className: "inline-flex items-center gap-2 px-3 py-1.5 rounded-md cursor-pointer transition-all duration-200 bg-gray-50 border border-gray-200 hover:bg-gray-100 hover:border-gray-300 group", onClick: () => {
                setShowText(true);
            } },
            React.createElement(Icon, { icon: IconProp.Lock, size: SizeProp.Small, thick: ThickProp.Thick, className: "h-3.5 w-3.5 text-gray-400 group-hover:text-gray-500" }),
            React.createElement("span", { className: "text-sm text-gray-500 group-hover:text-gray-600" }, "Click to reveal"),
            React.createElement(Icon, { icon: IconProp.ChevronRight, size: SizeProp.Small, thick: ThickProp.Thick, className: "h-3 w-3 text-gray-400 group-hover:text-gray-500 transition-transform duration-200 group-hover:translate-x-0.5" })));
    }
    return (React.createElement("div", { className: `inline-flex items-center gap-2 px-3 py-1.5 rounded-md transition-all duration-200 ${copied
            ? "bg-green-50 border border-green-200"
            : "bg-amber-50 border border-amber-200"}` },
        React.createElement(Icon, { icon: IconProp.Lock, size: SizeProp.Small, thick: ThickProp.Thick, className: `h-3.5 w-3.5 flex-shrink-0 ${copied ? "text-green-500" : "text-amber-500"}` }),
        React.createElement("code", { role: "revealed-text", className: `font-mono text-sm break-all ${copied ? "text-green-700" : "text-amber-800"}` }, props.text),
        React.createElement("div", { className: "flex items-center gap-1 ml-1 flex-shrink-0" },
            props.isCopyable && (React.createElement(Tooltip, { text: copied ? "Copied!" : "Copy" },
                React.createElement("div", { className: `p-1 rounded cursor-pointer transition-all duration-200 ${copied
                        ? "text-green-500"
                        : "text-amber-400 hover:text-amber-600 hover:bg-amber-100"}`, "data-testid": "copy-to-clipboard-icon", onClick: handleCopy }, copied ? (React.createElement(Icon, { icon: IconProp.CheckCircle, size: SizeProp.Small, thick: ThickProp.Thick, className: "h-3.5 w-3.5" })) : (React.createElement(Icon, { icon: IconProp.Copy, size: SizeProp.Small, thick: ThickProp.Thick, className: "h-3.5 w-3.5" }))))),
            React.createElement(Tooltip, { text: "Hide" },
                React.createElement("div", { className: `p-1 rounded cursor-pointer transition-all duration-200 ${copied
                        ? "text-green-400 hover:text-green-600 hover:bg-green-100"
                        : "text-amber-400 hover:text-amber-600 hover:bg-amber-100"}`, "data-testid": "hide-text-icon", onClick: () => {
                        setShowText(false);
                    } },
                    React.createElement(Icon, { icon: IconProp.Hide, size: SizeProp.Small, thick: ThickProp.Thick, className: "h-3.5 w-3.5" }))))));
};
export default HiddenText;
//# sourceMappingURL=HiddenText.js.map