import _defineProperty from "@babel/runtime/helpers/defineProperty";
// Copyright 1999-2023. Plesk International GmbH. All rights reserved.

import { Component, Fragment, createRef } from 'react';
import classNames from 'classnames';
import { CLS_PREFIX } from '../../constants';
import Button from '../Button';
import FormField from '../FormField';
import Input from '../Input';
import Translate from '../Translate';
import PasswordMeter from './PasswordMeter';
import generatePassword from './generatePassword';
import locale from './locale/en-US';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
/**
 * `FormFieldPassword` component provides secure way to enter a password.
 * @since 0.0.58
 */
class FormFieldPassword extends Component {
  constructor() {
    super(...arguments);
    _defineProperty(this, "state", {
      visible: false,
      passwordMeterVisible: false
    });
    _defineProperty(this, "targetRef", /*#__PURE__*/createRef());
    _defineProperty(this, "handleToggleClick", () => {
      this.setState(_ref => {
        let {
          visible
        } = _ref;
        return {
          visible: !visible
        };
      });
    });
    _defineProperty(this, "handleClosePasswordMeter", () => {
      this.setState({
        passwordMeterVisible: false
      });
    });
    _defineProperty(this, "handleBlur", this.handleClosePasswordMeter);
  }
  renderGenerateButton(_ref2) {
    let {
      setValue,
      isDisabled
    } = _ref2;
    const {
      baseClassName,
      generateButton
    } = this.props;
    const generateButtonProps = {
      className: `${baseClassName}__button--generate`,
      onClick: () => setValue(generatePassword()),
      tooltip: /*#__PURE__*/_jsx(Translate, {
        content: "FormFieldPassword.generateButtonHint",
        fallback: locale.generateButtonHint
      }),
      disabled: isDisabled(),
      children: /*#__PURE__*/_jsx(Translate, {
        content: "FormFieldPassword.generateButton",
        fallback: locale.generateButton
      })
    };
    let button;
    if (typeof generateButton === 'function') {
      button = generateButton(generateButtonProps);
    } else {
      button = /*#__PURE__*/_jsx(Button, {
        ...generateButtonProps
      });
    }
    return /*#__PURE__*/_jsxs(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__*/_jsx(FormField, {
      className: classNames(baseClassName, className),
      ...props,
      children: _ref3 => {
        let {
          getId,
          getName,
          getValue,
          setValue,
          isDisabled
        } = _ref3;
        const value = getValue('');
        const input = /*#__PURE__*/_jsx(Input, {
          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__*/_jsx(Button, {
            className: `${baseClassName}__button--show`,
            onClick: this.handleToggleClick,
            icon: visible ? 'visible' : 'invisible',
            tooltip: visible ? /*#__PURE__*/_jsx(Translate, {
              content: "FormFieldPassword.hidePassword",
              fallback: locale.hidePassword
            }) : /*#__PURE__*/_jsx(Translate, {
              content: "FormFieldPassword.showPassword",
              fallback: locale.showPassword
            }),
            ghost: true,
            disabled: isDisabled()
          }),
          disabled: isDisabled(),
          rootProps: {
            ref: this.targetRef
          }
        });
        return /*#__PURE__*/_jsxs("div", {
          className: classNames(`${baseClassName}__control`, `${baseClassName}__control--${size}`),
          children: [/*#__PURE__*/_jsx("div", {
            className: classNames(`${baseClassName}__field`, `${baseClassName}__field--${size}`),
            children: hidePasswordMeter ? input : /*#__PURE__*/_jsx(PasswordMeter, {
              value: value,
              targetRef: this.targetRef,
              visible: passwordMeterVisible && value !== '',
              onClose: this.handleClosePasswordMeter,
              ...passwordMeterProps,
              children: input
            })
          }), hideGenerateButton ? null : this.renderGenerateButton({
            setValue,
            isDisabled
          })]
        });
      }
    });
  }
}
_defineProperty(FormFieldPassword, "defaultProps", {
  hideShowButton: false,
  generateButton: undefined,
  hideGenerateButton: false,
  hidePasswordMeter: false,
  passwordMeterProps: {},
  size: 'md',
  autoFocus: undefined,
  autoComplete: undefined,
  className: undefined,
  baseClassName: `${CLS_PREFIX}form-field-password`
});
export default FormFieldPassword;