import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useState } from 'react';
import { Popover, PopoverAnchor, PopoverContent } from '../../../scalars/components/fragments/popover/index.js';
import { Tooltip, TooltipProvider } from '../../../ui/components/tooltip/index.js';
import { Icon } from '../../../ui/components/icon/index.js';
import { cn } from '../../../scalars/lib/utils.js';
import { UrlField } from '../../../scalars/components/url-field/index.js';
import { normalizeStringValue } from './utils.js';
export const buildUrlCellEditor = (urlFieldProps) => {
    const UrlCellEditor = (value, onChange, context) => {
        const [hasCopied, setHasCopied] = useState(false);
        const urlValue = normalizeStringValue(value);
        const shouldShowPopover = urlValue !== '' && context.isEditMode;
        const handleCopy = useCallback(() => {
            navigator.clipboard
                .writeText(urlValue)
                .then(() => {
                setHasCopied(true);
                setTimeout(() => {
                    setHasCopied(false);
                }, 2000);
            })
                .catch((error) => {
                console.error('Failed to copy URL', error);
            });
        }, [urlValue]);
        return (_jsxs(Popover, { open: shouldShowPopover, children: [_jsx(PopoverAnchor, { asChild: true, children: _jsx("div", { children: _jsx(UrlField, { name: context.column.field, className: "max-w-full", autoFocus: true, ...urlFieldProps, value: urlValue, onChange: (e) => {
                                onChange(e.target.value);
                            } }) }) }), shouldShowPopover && (_jsxs(PopoverContent, { align: "start", sideOffset: 12, className: cn('flex items-center gap-2 px-3 py-2 border-none w-fit'), onOpenAutoFocus: (e) => {
                        e.preventDefault();
                    }, onMouseDown: (e) => {
                        e.preventDefault();
                    }, children: [_jsx("div", { className: "max-w-60", children: _jsx("a", { href: urlValue, target: "_blank", rel: "noopener noreferrer", className: "text-blue-900 hover:underline focus-visible:outline-none truncate block text-sm", title: urlValue, children: urlValue }) }), _jsx(TooltipProvider, { children: _jsx(Tooltip, { content: "Copied!", open: hasCopied, triggerAsChild: true, children: _jsx("button", { type: "button", "aria-label": "Copy URL", onClick: handleCopy, className: cn('focus-visible:outline-none [&_svg]:pointer-events-none'), children: _jsx(Icon, { name: "Copy", size: 16, className: cn('text-gray-500 dark:text-gray-600') }) }) }) })] }))] }));
    };
    return UrlCellEditor;
};
//# sourceMappingURL=url-editor.js.map