'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// packages/ui/src/internal/devtools/components/MaskedValue.tsx
/**

 * @fileoverview Masked Value Component

 * @description Reusable component for displaying sensitive values with mask/unmask and copy functionality

 *

 * @version 0.0.1

 * @since 0.0.1

 * @author AMBROISE PARK Consulting

 */
import { Eye, EyeOff } from 'lucide-react';
import { useState } from 'react';
import { Stack, Text, Button, BUTTON_VARIANT, CopyToClipboard, } from '@donotdev/components';
import { shouldMaskValue, maskSensitiveValue } from '../utils/maskSensitive';
/**

 * MaskedValue component - displays sensitive values with mask/unmask and copy

 * Always copies the real value, but can mask the display

 */
export const MaskedValue = ({ keyName, value, className, textClassName = 'dndev-font-mono dndev-text-xs dndev-break-all', compact = false, }) => {
    const [isUnmasked, setIsUnmasked] = useState(false);
    const stringValue = String(value);
    const isSensitive = shouldMaskValue(keyName, stringValue);
    const displayValue = isSensitive && !isUnmasked ? maskSensitiveValue(stringValue) : stringValue;
    if (compact) {
        return (_jsxs(Stack, { direction: "row", align: "center", gap: "tight", className: className, children: [_jsxs(Text, { as: "span", className: textClassName, children: [displayValue, isSensitive && !isUnmasked && (_jsx(Text, { as: "span", className: "dndev-text-muted-foreground dndev-ml-sm", children: "(masked)" }))] }), isSensitive && (_jsx(Button, { onClick: () => setIsUnmasked(!isUnmasked), variant: BUTTON_VARIANT.GHOST, icon: isUnmasked ? EyeOff : Eye, title: isUnmasked ? 'Mask value' : 'Reveal value', className: "dndev-flex-shrink-0" })), _jsx(CopyToClipboard, { text: stringValue, tooltipText: "Copy value", copiedTooltipText: "Copied!", variant: "ghost", className: "dndev-flex-shrink-0" })] }));
    }
    return (_jsxs(Stack, { direction: "row", align: "center", gap: "tight", className: className, children: [_jsxs(Text, { as: "span", className: textClassName, children: [displayValue, isSensitive && !isUnmasked && (_jsx(Text, { as: "span", className: "dndev-text-muted-foreground dndev-ml-sm", children: "(masked)" }))] }), isSensitive && (_jsx(Button, { onClick: () => setIsUnmasked(!isUnmasked), variant: BUTTON_VARIANT.GHOST, icon: isUnmasked ? EyeOff : Eye, title: isUnmasked ? 'Mask value' : 'Reveal value', className: "dndev-flex-shrink-0" })), _jsx(CopyToClipboard, { text: stringValue, tooltipText: "Copy value", copiedTooltipText: "Copied!", variant: "ghost", className: "dndev-flex-shrink-0" })] }));
};
