import React from 'react';
import { faEyeSlash } from '@fortawesome/free-solid-svg-icons/faEyeSlash';
import { faEye } from '@fortawesome/free-solid-svg-icons/faEye';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { Tooltip, TOOLTIP_PLACEMENT_TYPES } from '../tooltip';
import { INPUT_TYPES } from './constants';
import { isPassword } from './utilities';
import { BUTTON_TYPES } from '../button';
import { useTranslation } from '../hooks/use-translation';
import { jsx as _jsx } from "react/jsx-runtime";
export default function PasswordToggleButton({
  onClick,
  fieldType,
  passwordToggleButtonTexts,
  isDisabled = false
}) {
  const {
    t
  } = useTranslation();
  const isPasswordType = isPassword(fieldType);
  const tooltipText = isPasswordType ? passwordToggleButtonTexts.show : passwordToggleButtonTexts.hide;
  function handleClick() {
    onClick(isPasswordType ? INPUT_TYPES.TEXT : INPUT_TYPES.PASSWORD);
  }
  return /*#__PURE__*/_jsx(Tooltip, {
    content: tooltipText,
    placement: TOOLTIP_PLACEMENT_TYPES.TOP,
    children: /*#__PURE__*/_jsx("button", {
      className: "button command round-icon-button xs toggle-password-button",
      "test-id": "toggle-password-button",
      onClick: handleClick,
      disabled: isDisabled,
      "aria-label": passwordToggleButtonTexts.toggle || t('Toggle'),
      type: BUTTON_TYPES.BUTTON,
      children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
        icon: isPasswordType ? faEyeSlash : faEye,
        "test-id": "show-password-toggle"
      })
    })
  });
}