import React, { useState, useCallback } from 'react';
import PropTypes from 'prop-types';
import { InputAdornment } from '@mui/material';
import VisibilityIcon from '@mui/icons-material/Visibility';
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
import TextField from '../TextField';
import IconButton from '../../buttons/IconButton';
const getIcon = (showPassword) => (showPassword ? React.createElement(VisibilityIcon, null) : React.createElement(VisibilityOffIcon, null));
/**
 * Password Fields let users enter passwords that can be hidden/displayed.
 * At its core, it uses [TextField](https://github.com/osstotalsoft/rocket-ui-ts/tree/master/src/components/inputs/TextField).
 */
const PasswordField = ({ disabled, error, ...rest }) => {
    const [showPassword, setShowPassword] = useState(false);
    const handleClickShowPassword = useCallback(() => {
        setShowPassword(current => !current);
    }, []);
    const handleMouseDownPassword = useCallback((event) => {
        event.preventDefault();
    }, []);
    return (React.createElement(TextField, { disabled: disabled, error: error, ...rest, inputProps: {
            type: showPassword ? 'text' : 'password'
        }, endAdornment: React.createElement(InputAdornment, { position: "end" },
            React.createElement(IconButton, { disabled: disabled, size: "small", "aria-label": "toggle password visibility", color: error ? 'error' : 'secondary', variant: "text", onClick: handleClickShowPassword, onMouseDown: handleMouseDownPassword }, getIcon(showPassword))) }));
};
PasswordField.propTypes = {
    /**
     * If true, the component is disabled.
     */
    disabled: PropTypes.bool,
    /**
     * If true, the text field and icon are displayed in an error state.
     */
    error: PropTypes.bool
};
export default PasswordField;
//# sourceMappingURL=PasswordField.js.map