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";
import * as React from 'react';
import styled from 'styled-components';
import { fontSize, theme } from '../../Tools/interpolation';
import Input from './Input';
import { FarEye, FarEyeSlash } from '../Icons';
var Switch =
/*#__PURE__*/
styled.span.withConfig({
  componentId: "fsp9d5-0"
})(["\n  position: absolute;\n  right: 1rem;\n  bottom: 0.5rem;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 600;\n  user-select: none;\n\n  &:hover {\n    text-decoration: underline;\n  }\n"], theme('fontPrimary'), fontSize('xs'));
var PasswordInput =
/*#__PURE__*/
styled(Input).withConfig({
  componentId: "fsp9d5-1"
})(["\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)), "handleSwitchClick", 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;
      }

      return React.createElement(Switch, {
        onClick: _this.handleSwitchClick
      }, _this.state.type === 'password' ? React.createElement(FarEye, {
        selectable: true,
        size: "20px"
      }) : React.createElement(FarEyeSlash, {
        selectable: true,
        size: "20px"
      }));
    });

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

  _createClass(Password, [{
    key: "render",
    value: function render() {
      var type = this.state.type;
      var renderSuffix = this.props.renderSuffix;
      return React.createElement(PasswordInput, _extends({}, this.props, {
        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 : {};
export default Password;