import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { Input } from '../input/index.js';
import { cn, useUniqueId } from '../../../../scalars/lib/index.js';
import { FormDescription } from '../../../../scalars/components/fragments/form-description/index.js';
import { FormGroup } from '../../../../scalars/components/fragments/form-group/index.js';
import { FormLabel } from '../../../../scalars/components/fragments/form-label/index.js';
import { FormMessageList } from '../../../../scalars/components/fragments/form-message/index.js';
import { Popover, PopoverAnchor, PopoverContent } from '../../../../scalars/components/fragments/popover/index.js';
import { PasswordStrength } from './password-strength.js';
import { Icon } from '../../icon/index.js';
import { PasswordInputDiff } from './password-input-diff.js';
const PasswordInput = React.forwardRef(({ id: idProp, className, label, description, value, defaultValue, onChange, onKeyDown, onClick, disabled, required, errors, warnings, pattern, showPasswordStrength = true, showPasswordStrengthOpen = false, viewMode = 'edition', baseValue, ...props }, ref) => {
    const prefix = useUniqueId();
    const id = idProp ?? `${prefix}-password-input`;
    const [isPopoverOpen, setIsPopoverOpen] = useState(showPasswordStrengthOpen);
    const [password, setPassword] = useState(value ?? defaultValue ?? '');
    const [showPassword, setShowPassword] = useState(false);
    const containerRef = useRef(null);
    const timeoutRef = useRef(null);
    const resetPopoverTimeout = useCallback(() => {
        if (timeoutRef.current) {
            clearTimeout(timeoutRef.current);
        }
        timeoutRef.current = setTimeout(() => {
            setIsPopoverOpen(false);
        }, 10000);
    }, []);
    const handleChange = useCallback((event) => {
        setIsPopoverOpen(true);
        setPassword(event.target.value);
        onChange?.(event);
        resetPopoverTimeout();
    }, [onChange, resetPopoverTimeout]);
    const handleKeyDown = useCallback((event) => {
        if (event.key === 'Enter' && isPopoverOpen) {
            setIsPopoverOpen(false);
            if (timeoutRef.current) {
                clearTimeout(timeoutRef.current);
            }
        }
        onKeyDown?.(event);
    }, [isPopoverOpen, onKeyDown]);
    const handleClick = useCallback((event) => {
        setIsPopoverOpen(true);
        onClick?.(event);
        resetPopoverTimeout();
    }, [onClick, resetPopoverTimeout]);
    useEffect(() => {
        if (value !== undefined) {
            setPassword(value);
        }
    }, [value]);
    useEffect(() => {
        return () => {
            if (timeoutRef.current) {
                clearTimeout(timeoutRef.current);
            }
        };
    }, []);
    const hasWarning = Array.isArray(warnings) && warnings.length > 0;
    const hasError = Array.isArray(errors) && errors.length > 0;
    if (viewMode !== 'edition') {
        return (_jsx(PasswordInputDiff, { value: password, label: label, required: required, viewMode: viewMode, baseValue: baseValue }));
    }
    return (_jsxs(FormGroup, { children: [!!label && (_jsx(FormLabel, { htmlFor: id, disabled: disabled, hasError: hasError, required: required, onClick: (e) => {
                    e.preventDefault();
                    e.target.control?.focus();
                }, children: label })), _jsxs(Popover, { open: isPopoverOpen, onOpenChange: setIsPopoverOpen, children: [_jsx(PopoverAnchor, { asChild: true, children: _jsxs("div", { ref: containerRef, className: cn('relative'), children: [_jsx(Input, { ref: ref, id: id, value: password, onChange: handleChange, onKeyDown: handleKeyDown, onClick: handleClick, className: cn('pr-9', className), disabled: disabled, "aria-invalid": hasError, "aria-label": !label ? 'Password input' : undefined, "aria-required": required, type: showPassword ? 'text' : 'password', pattern: pattern?.source, autoCorrect: "off", autoCapitalize: "off", spellCheck: false, ...(!!label && { 'data-label': label }), ...props }), _jsx("div", { className: cn('absolute right-3 top-1/2 flex size-4 -translate-y-1/2 items-center', disabled && 'pointer-events-none'), children: _jsx("button", { type: "button", "aria-label": showPassword ? 'Hide password' : 'Show password', disabled: disabled, onClick: () => {
                                            setShowPassword(!showPassword);
                                        }, className: cn('group focus-visible:outline-none'), children: _jsx(Icon, { name: showPassword ? 'Hide' : 'Show', size: 16, className: cn('text-gray-500 group-hover:text-gray-700 group-focus:text-gray-700 pointer-events-none'), "aria-hidden": "true" }) }) })] }) }), _jsx(PopoverContent, { align: "start", onOpenAutoFocus: (e) => {
                            e.preventDefault();
                        }, onInteractOutside: (e) => {
                            if (e.target instanceof Element && containerRef.current) {
                                const isWithinContainer = containerRef.current.contains(e.target);
                                if (isWithinContainer) {
                                    e.preventDefault();
                                }
                            }
                        }, className: cn('border-none shadow-[0px_2px_12px_0px_rgba(37,42,52,0.10)]'), children: showPasswordStrength && _jsx(PasswordStrength, { password: password }) })] }), !!description && _jsx(FormDescription, { children: description }), hasWarning && _jsx(FormMessageList, { messages: warnings, type: "warning" }), hasError && _jsx(FormMessageList, { messages: errors, type: "error" })] }));
});
PasswordInput.displayName = 'PasswordInput';
export { PasswordInput };
//# sourceMappingURL=password-input.js.map