"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _constants = require("../../constants");
var _Button = _interopRequireDefault(require("../Button"));
var _FormField = _interopRequireDefault(require("../FormField"));
var _Input = _interopRequireDefault(require("../Input"));
var _Translate = _interopRequireDefault(require("../Translate"));
var _PasswordMeter = _interopRequireDefault(require("./PasswordMeter"));
var _generatePassword = _interopRequireDefault(require("./generatePassword"));
var _enUS = _interopRequireDefault(require("./locale/en-US"));
var _jsxRuntime = require("react/jsx-runtime");
// Copyright 1999-2023. Plesk International GmbH. All rights reserved.

/**
 * `FormFieldPassword` component provides secure way to enter a password.
 * @since 0.0.58
 */
class FormFieldPassword extends _react.Component {
  constructor() {
    super(...arguments);
    (0, _defineProperty2.default)(this, "state", {
      visible: false,
      passwordMeterVisible: false
    });
    (0, _defineProperty2.default)(this, "targetRef", /*#__PURE__*/(0, _react.createRef)());
    (0, _defineProperty2.default)(this, "handleToggleClick", () => {
      this.setState(_ref => {
        let {
          visible
        } = _ref;
        return {
          visible: !visible
        };
      });
    });
    (0, _defineProperty2.default)(this, "handleClosePasswordMeter", () => {
      this.setState({
        passwordMeterVisible: false
      });
    });
    (0, _defineProperty2.default)(this, "handleBlur", this.handleClosePasswordMeter);
  }
  renderGenerateButton(_ref2) {
    let {
      setValue,
      isDisabled
    } = _ref2;
    const {
      baseClassName,
      generateButton
    } = this.props;
    const generateButtonProps = {
      className: `${baseClassName}__button--generate`,
      onClick: () => setValue((0, _generatePassword.default)()),
      tooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
        content: "FormFieldPassword.generateButtonHint",
        fallback: _enUS.default.generateButtonHint
      }),
      disabled: isDisabled(),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
        content: "FormFieldPassword.generateButton",
        fallback: _enUS.default.generateButton
      })
    };
    let button;
    if (typeof generateButton === 'function') {
      button = generateButton(generateButtonProps);
    } else {
      button = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
        ...generateButtonProps
      });
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
      children: [` `, button]
    });
  }
  render() {
    const {
      baseClassName,
      className,
      hideShowButton,
      generateButton,
      hideGenerateButton,
      hidePasswordMeter,
      passwordMeterProps,
      size,
      autoFocus,
      autoComplete,
      ...props
    } = this.props;
    const {
      visible,
      passwordMeterVisible
    } = this.state;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormField.default, {
      className: (0, _classnames.default)(baseClassName, className),
      ...props,
      children: _ref3 => {
        let {
          getId,
          getName,
          getValue,
          setValue,
          isDisabled
        } = _ref3;
        const value = getValue('');
        const input = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
          id: getId(),
          name: getName(),
          type: visible ? 'text' : 'password',
          value: value,
          onChange: e => {
            setValue(e.target.value);
            this.setState({
              passwordMeterVisible: true
            });
          },
          onBlur: this.handleBlur,
          autoFocus: autoFocus,
          autoComplete: autoComplete,
          className: `${baseClassName}__input`,
          size: size,
          suffix: hideShowButton ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
            className: `${baseClassName}__button--show`,
            onClick: this.handleToggleClick,
            icon: visible ? 'visible' : 'invisible',
            tooltip: visible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
              content: "FormFieldPassword.hidePassword",
              fallback: _enUS.default.hidePassword
            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
              content: "FormFieldPassword.showPassword",
              fallback: _enUS.default.showPassword
            }),
            ghost: true,
            disabled: isDisabled()
          }),
          disabled: isDisabled(),
          rootProps: {
            ref: this.targetRef
          }
        });
        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          className: (0, _classnames.default)(`${baseClassName}__control`, `${baseClassName}__control--${size}`),
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            className: (0, _classnames.default)(`${baseClassName}__field`, `${baseClassName}__field--${size}`),
            children: hidePasswordMeter ? input : /*#__PURE__*/(0, _jsxRuntime.jsx)(_PasswordMeter.default, {
              value: value,
              targetRef: this.targetRef,
              visible: passwordMeterVisible && value !== '',
              onClose: this.handleClosePasswordMeter,
              ...passwordMeterProps,
              children: input
            })
          }), hideGenerateButton ? null : this.renderGenerateButton({
            setValue,
            isDisabled
          })]
        });
      }
    });
  }
}
(0, _defineProperty2.default)(FormFieldPassword, "defaultProps", {
  hideShowButton: false,
  generateButton: undefined,
  hideGenerateButton: false,
  hidePasswordMeter: false,
  passwordMeterProps: {},
  size: 'md',
  autoFocus: undefined,
  autoComplete: undefined,
  className: undefined,
  baseClassName: `${_constants.CLS_PREFIX}form-field-password`
});
var _default = exports.default = FormFieldPassword;