import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useState } from 'react';
import { EyeCrossedOutlineMd } from '../../icons/EyeCrossedOutlineMd';
import { EyeOutlineMd } from '../../icons/EyeOutlineMd';
import { IconButton } from '../IconButton';
import { useHidePersonalData } from '../personalDataSecurity';
import { TextField } from '../TextField';
import { classNames } from '../utils/classNames';
export const PasswordField = forwardRef(({ label, disabled = false, showSymbols = false, isHidePersonalData, inputProps, ...props }, ref) => {
    const [showPassword, setShowPassword] = useState(showSymbols);
    const handleClickShowPassword = () => setShowPassword((show) => !show);
    const handleMouseDownPassword = (event) => {
        event.preventDefault();
    };
    const hidePersonalDataClassname = useHidePersonalData({
        isEnabled: isHidePersonalData,
        type: 'input',
    });
    return (_jsx(TextField, { inputProps: {
            ...inputProps,
            className: classNames(inputProps?.className, hidePersonalDataClassname),
        }, ref: ref, label: label, type: showPassword ? 'text' : 'password', disabled: disabled, InputProps: {
            endAdornment: (_jsx(IconButton, { variant: "text", color: "grey", disabled: disabled, "aria-label": "\u041F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0432\u0438\u0434\u0438\u043C\u043E\u0441\u0442\u044C \u043F\u0430\u0440\u043E\u043B\u044F", onClick: handleClickShowPassword, onMouseDown: handleMouseDownPassword, children: showPassword ? (_jsx(EyeCrossedOutlineMd, { id: "visibility-off" })) : (_jsx(EyeOutlineMd, { id: "visibility-on" })) })),
        }, ...props }));
});
