import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
import _extends from "@babel/runtime/helpers/esm/extends";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
//  strict
import * as React from 'react';
import styled, { css } from 'styled-components';
import { theme } from '../../Tools/interpolation';
import { Input } from './Input';
import { FarEye, FarEyeSlash } from '../Icons';
var iconCss =
/*#__PURE__*/
css(["\n  position: absolute;\n  right: 1rem;\n  bottom: calc(1.35rem - 8px);\n  user-select: none;\n  fill: ", ";\n\n  &:hover {\n    fill: ", ";\n  }\n"], theme('inputColor'), theme('inputColor'));
var Eye =
/*#__PURE__*/
styled(FarEye).withConfig({
  componentId: "fsp9d5-0"
})(["\n  ", ";\n"], iconCss);
var EyeSlash =
/*#__PURE__*/
styled(FarEyeSlash).withConfig({
  componentId: "fsp9d5-1"
})(["\n  ", ";\n"], iconCss);
var PasswordInput =
/*#__PURE__*/
styled(Input).withConfig({
  componentId: "fsp9d5-2"
})(["\n  input {\n    padding-right: 3rem;\n  }\n"]);

var Password =
/*#__PURE__*/
function (_React$Component) {
  _inherits(Password, _React$Component);

  function Password(_props) {
    var _this;

    _classCallCheck(this, Password);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Password).call(this, _props));

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleIconClick", function () {
      _this.state.type === 'password' ? _this.setState({
        type: 'text'
      }) : _this.setState({
        type: 'password'
      });
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "renderToggle", function (disabled) {
      if (disabled === true) {
        return null;
      }

      var props = {
        onClick: _this.handleIconClick,
        selectable: true,
        size: '16px'
      };
      return _this.state.type === 'password' ? React.createElement(EyeSlash, props) : React.createElement(Eye, props);
    });

    _this.state = {
      type: _props.type
    };
    return _this;
  }

  _createClass(Password, [{
    key: "render",
    value: function render() {
      var type = this.state.type;
      var _this$props = this.props,
          ref = _this$props.forwardRef,
          renderSuffix = _this$props.renderSuffix;
      return React.createElement(PasswordInput, _extends({}, this.props, {
        ref: ref,
        renderSuffix: renderSuffix || this.renderToggle,
        type: type
      }));
    }
  }]);

  return Password;
}(React.Component);

_defineProperty(Password, "defaultProps", _objectSpread({}, Input.defaultProps, {
  type: 'password'
}));

Password.propTypes = process.env.NODE_ENV !== "production" ? Input.propTypes : {};

var PasswordWithRef = function PasswordWithRef(props, ref) {
  return React.createElement(Password, _extends({}, props, {
    forwardRef: ref
  }));
};

export default React.forwardRef(PasswordWithRef);