import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon } from '../../../../ui/components/icon/index.js';
import { cn } from '../../../../scalars/lib/index.js';
import React, { useMemo, useState } from 'react';
import { useMediaQuery } from 'usehooks-ts';
import { Input } from '../../../../ui/components/data-entry/input/index.js';
import { Tooltip, TooltipProvider } from '../../../../ui/components/tooltip/tooltip.js';
import { sharedValueTransformers } from '../../../lib/shared-value-transformers.js';
import ValueTransformer from '../value-transformer/index.js';
const IdAutocompleteInputContainer = React.forwardRef(({ id, name, value, className, isLoading, haveFetchError, disabled, onChange, onBlur, onClick, selectedOption, optionsLength, handleOpenChange, onKeyDown, onMouseDown, placeholder, hasError, label, required, isPopoverOpen, maxLength, handlePaste, onPaste, ...props }, ref) => {
    const [hasCopied, setHasCopied] = useState(false);
    const hasHover = useMediaQuery('(hover: hover) and (pointer: fine)');
    const transformers = useMemo(() => [sharedValueTransformers.trimOnBlur(), sharedValueTransformers.trimOnEnter()], []);
    return (_jsxs("div", { className: cn('group relative'), children: [_jsx(ValueTransformer, { transformers: transformers, children: _jsx(Input, { id: id, name: name, value: value, className: cn('pr-9', className), disabled: disabled, onChange: onChange, onBlur: onBlur, onClick: (e) => {
                        const input = e.target;
                        if (!(isLoading || haveFetchError) && !selectedOption && input.value !== '') {
                            handleOpenChange?.(true);
                        }
                        onClick?.(e);
                    }, onKeyDown: (e) => {
                        onKeyDown?.(e);
                        const isOptionsRelatedKey = ['ArrowUp', 'ArrowDown', 'Enter'].includes(e.key);
                        if (e.key === 'Enter' && isPopoverOpen && optionsLength === 0) {
                            handleOpenChange?.(false);
                            e.preventDefault();
                            return;
                        }
                        if (!(isOptionsRelatedKey && isPopoverOpen && optionsLength > 0)) {
                            e.stopPropagation();
                        }
                    }, onMouseDown: (e) => {
                        const input = e.target;
                        if (!input.contains(document.activeElement)) {
                            // wait for the next tick to ensure the focus occurs first
                            requestAnimationFrame(() => {
                                input.select();
                            });
                        }
                        onMouseDown?.(e);
                    }, onPaste: (e) => {
                        handlePaste?.(e);
                        onPaste?.(e);
                    }, placeholder: placeholder, "aria-invalid": hasError, "aria-label": !label ? 'Id Autocomplete' : undefined, "aria-required": required, "aria-expanded": isPopoverOpen, "aria-autocomplete": "list", autoComplete: "off", autoCorrect: "off", maxLength: maxLength, role: "combobox", spellCheck: false, type: "text", ...props, ref: ref }) }), _jsxs("div", { className: cn('absolute right-3 top-1/2 flex size-4 -translate-y-1/2 items-center', !isLoading && !haveFetchError && !selectedOption && 'pointer-events-none'), children: [isLoading && (_jsx(Icon, { name: "Reload", size: 16, className: cn('animate-spin text-gray-500 dark:text-gray-600') })), haveFetchError && (_jsx(TooltipProvider, { children: _jsx(Tooltip, { content: "Network error!", children: _jsx(Icon, { name: "Error", size: 16, className: cn('text-red-900') }) }) })), selectedOption && !isLoading && !haveFetchError && (_jsx(TooltipProvider, { children: _jsx(Tooltip, { content: "Copied!", open: hasCopied, triggerAsChild: true, children: _jsx("button", { type: "button", onClick: () => {
                                    navigator.clipboard
                                        .writeText(selectedOption.value)
                                        .then(() => {
                                        setHasCopied(true);
                                        setTimeout(() => {
                                            setHasCopied(false);
                                        }, 2000);
                                    })
                                        .catch((error) => {
                                        console.error('Failed to copy value: ', error);
                                    });
                                }, 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 dark:text-gray-600') }) }) }) }))] })] }));
});
IdAutocompleteInputContainer.displayName = 'IdAutocompleteInputContainer';
export { IdAutocompleteInputContainer };
//# sourceMappingURL=id-autocomplete-input-container.js.map