import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import cx from "classnames";
import "./styles.scss";
import { Icon, Tooltip } from '../../basic';
import { useTranslation } from "react-i18next";
export const TitlePositions = ["top", "right"];
export default function AppCopyText({ className, title, content, titlePosition = "right", }) {
    const [copied, setCopied] = useState(false);
    const [isHovered, setIsHovered] = useState(false);
    const { t } = useTranslation("common");
    const getClassNames = cx("ds-copy-text", className, {
        "title-top": titlePosition === "top" && title,
        "title-right": titlePosition === "right" && title,
        "no-title": !title,
    });
    const handleClipboard = () => {
        navigator.clipboard
            .writeText(content)
            .then(() => {
            setCopied(true);
            setTimeout(() => {
                setCopied(false);
            }, 2000);
        })
            .catch((err) => {
            console.error("Failed to copy text:", err);
        });
    };
    const tooltipTitle = copied ? t("tooltip.copied") : t("tooltip.copy");
    const iconName = copied ? "check" : "content_copy";
    const iconFilled = isHovered && !copied;
    const contentElement = (_jsxs("div", { className: getClassNames, onClick: handleClipboard, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [title && _jsx("span", { className: "ds-copy-text__title", children: title }), title && titlePosition === "right" && (_jsx("span", { className: "ds-copy-text__separator", children: "|" })), _jsxs("div", { className: "group-content", children: [_jsx("span", { className: "ds-copy-text__content", children: content }), _jsx(Icon, { name: iconName, size: "small", className: "ds-copy-text__icon", filled: iconFilled })] })] }));
    return (_jsx(Tooltip, { title: tooltipTitle, placement: "top", mode: "simple", triggerOpen: copied ? true : undefined, children: contentElement }));
}
