import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { cn, Icon } from "@powerhousedao/design-system";
import { useCallback, useState } from "react";
import { useMediaQuery } from "usehooks-ts";
import { Tooltip, TooltipProvider } from "../tooltip/tooltip.js";
import { InputDiff } from "./subcomponent/input-diff.js";
import { TextDiff } from "./subcomponent/text-diff.js";
const CopyIcon = ({ value, hasCopied, setHasCopied, hasHover, }) => {
    const copy = useCallback(() => {
        navigator.clipboard
            .writeText(value)
            .then(() => {
            setHasCopied(true);
            setTimeout(() => setHasCopied(false), 2000);
        })
            .catch((error) => {
            console.error("Failed to copy value: ", error);
        });
    }, [value, setHasCopied]);
    return (_jsx(TooltipProvider, { children: _jsx(Tooltip, { content: "Copied!", open: hasCopied, triggerAsChild: true, children: _jsx("button", { type: "button", onClick: copy, className: cn("focus-visible:outline-none [&_svg]:pointer-events-none", hasHover &&
                    "opacity-0 transition-opacity duration-500 group-hover:opacity-100"), children: _jsx(Icon, { name: "Copy", size: 16, className: cn("text-gray-500") }) }) }) }));
};
export const SplittedInputDiff = ({ baseValue, value, viewMode, diffMode, showCopyIcon = false, }) => {
    const [hasCopiedLeft, setHasCopiedLeft] = useState(false);
    const [hasCopiedRight, setHasCopiedRight] = useState(false);
    const hasHover = useMediaQuery("(hover: hover) and (pointer: fine)");
    return (_jsx(InputDiff, { className: cn("group"), children: viewMode === "mixed" ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: cn("flex flex-1 items-center gap-2 truncate [&>span]:truncate"), children: [_jsx(TextDiff, { baseValue: baseValue, value: value, viewMode: "removal", diffMode: diffMode, className: cn("flex-1") }), showCopyIcon && baseValue !== undefined && baseValue !== "" && (_jsx(CopyIcon, { value: baseValue, hasCopied: hasCopiedLeft, setHasCopied: setHasCopiedLeft, hasHover: hasHover }))] }), _jsx("div", { className: cn("ml-3 mr-3 h-[34px] w-px bg-gray-300") }), _jsxs("div", { className: cn("flex flex-1 items-center gap-2 truncate [&>span]:truncate"), children: [_jsx(TextDiff, { baseValue: baseValue, value: value, viewMode: "addition", diffMode: diffMode, className: cn("flex-1") }), showCopyIcon && value !== "" && (_jsx(CopyIcon, { value: value, hasCopied: hasCopiedRight, setHasCopied: setHasCopiedRight, hasHover: hasHover }))] })] })) : (_jsxs("div", { className: cn("flex flex-1 items-center gap-2 truncate [&>span]:truncate"), children: [_jsx(TextDiff, { baseValue: baseValue, value: value, viewMode: viewMode, diffMode: diffMode, className: cn("flex-1") }), showCopyIcon &&
                    ((viewMode === "removal" &&
                        baseValue !== undefined &&
                        baseValue !== "") ||
                        (viewMode === "addition" && value !== "")) && (_jsx(CopyIcon, { value: viewMode === "removal" ? (baseValue ?? "") : value, hasCopied: hasCopiedLeft, setHasCopied: setHasCopiedLeft, hasHover: hasHover }))] })) }));
};
//# sourceMappingURL=splitted-input-diff.js.map