'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactRedux = require('react-redux');

var _reactIntl = require('react-intl');

var _components = require('@doodle/components');

var _ic_mail = require('@doodle/components/visuals/Icon/svg/ic_mail.svg');

var _ic_mail2 = _interopRequireDefault(_ic_mail);

var _d_anonymous = require('@doodle/components/visuals/Icon/svg/d_anonymous.svg');

var _d_anonymous2 = _interopRequireDefault(_d_anonymous);

var _ic_arrow_back = require('@doodle/components/visuals/Icon/svg/ic_arrow_back.svg');

var _ic_arrow_back2 = _interopRequireDefault(_ic_arrow_back);

var _actions = require('../../state/actions');

var _messages = require('./messages');

var _messages2 = _interopRequireDefault(_messages);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var SignupTab = function (_Component) {
  _inherits(SignupTab, _Component);

  function SignupTab() {
    _classCallCheck(this, SignupTab);

    return _possibleConstructorReturn(this, (SignupTab.__proto__ || Object.getPrototypeOf(SignupTab)).apply(this, arguments));
  }

  _createClass(SignupTab, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          isLoggedIn = _props.isLoggedIn,
          loading = _props.loading,
          name = _props.name,
          nameValid = _props.nameValid,
          nameError = _props.nameError,
          email = _props.email,
          emailValid = _props.emailValid,
          emailError = _props.emailError,
          password = _props.password,
          passwordValid = _props.passwordValid,
          passwordError = _props.passwordError,
          valid = _props.valid,
          apiError = _props.apiError,
          onClickBack = _props.onClickBack,
          onClickCloseApiError = _props.onClickCloseApiError,
          onChangeSignupName = _props.onChangeSignupName,
          onChangeSignupEmail = _props.onChangeSignupEmail,
          onChangeSignupPassword = _props.onChangeSignupPassword,
          onSubmit = _props.onSubmit,
          intl = _props.intl;

      return _react2.default.createElement(
        'form',
        { onSubmit: onSubmit, className: 'SignupTab' },
        _react2.default.createElement(
          'div',
          { className: 'SignupTab-backButton' },
          _react2.default.createElement(_components.IconButton, {
            icon: _ic_arrow_back2.default,
            variant: 'white',
            semantic: intl.formatMessage(_messages2.default.back),
            onClick: onClickBack
          })
        ),
        apiError && _react2.default.createElement(
          'div',
          { className: 'SignupTab-error' },
          _react2.default.createElement(
            _components.Nag,
            { type: 'error', closeLabel: intl.formatMessage(_messages2.default.close), onClose: onClickCloseApiError },
            apiError === 'unreachable' && _react2.default.createElement(_reactIntl.FormattedMessage, _messages2.default.apiErrorUnreachable),
            apiError === 'unknown' && _react2.default.createElement(_reactIntl.FormattedMessage, _messages2.default.apiErrorUnknown)
          )
        ),
        _react2.default.createElement(
          _components.Input,
          { valid: nameValid },
          _react2.default.createElement(_components.InputField, {
            value: name,
            name: 'name',
            placeholder: intl.formatMessage(_messages2.default.name),
            onChange: onChangeSignupName
          }),
          nameError && _react2.default.createElement(
            _components.InputFeedback,
            { type: 'error' },
            nameError === 'missing' && _react2.default.createElement(_reactIntl.FormattedMessage, _messages2.default.nameErrorMissing),
            nameError === 'too-long' && _react2.default.createElement(_reactIntl.FormattedMessage, _messages2.default.nameErrorTooLong)
          )
        ),
        _react2.default.createElement(
          _components.Input,
          { valid: emailValid },
          _react2.default.createElement(_components.InputFieldWithIcon, {
            value: email,
            name: 'email',
            placeholder: intl.formatMessage(_messages2.default.email),
            icon: _ic_mail2.default,
            semantic: intl.formatMessage(_messages2.default.email),
            onChange: onChangeSignupEmail
          }),
          emailError && _react2.default.createElement(
            _components.InputFeedback,
            { type: 'error' },
            emailError === 'missing' && _react2.default.createElement(_reactIntl.FormattedMessage, _messages2.default.emailErrorMissing),
            emailError === 'invalid' && _react2.default.createElement(_reactIntl.FormattedMessage, _messages2.default.emailErrorInvalid),
            emailError === 'already-used' && _react2.default.createElement(_reactIntl.FormattedMessage, _messages2.default.emailErrorAlreadyUsed)
          )
        ),
        _react2.default.createElement(
          _components.Input,
          { valid: passwordValid },
          _react2.default.createElement(_components.InputFieldWithIcon, {
            value: password,
            name: 'password',
            placeholder: intl.formatMessage(_messages2.default.password),
            icon: _d_anonymous2.default,
            semantic: intl.formatMessage(_messages2.default.password),
            type: 'password',
            onChange: onChangeSignupPassword
          }),
          passwordError && _react2.default.createElement(
            _components.InputFeedback,
            { type: 'error' },
            passwordError === 'missing' && _react2.default.createElement(_reactIntl.FormattedMessage, _messages2.default.passwordErrorMissing),
            passwordError === 'too-long' && _react2.default.createElement(_reactIntl.FormattedMessage, _messages2.default.passwordErrorTooLong),
            passwordError === 'too-short' && _react2.default.createElement(_reactIntl.FormattedMessage, _messages2.default.passwordErrorTooShort),
            passwordError === 'invalid' && _react2.default.createElement(_reactIntl.FormattedMessage, _messages2.default.passwordErrorInvalid),
            passwordError === 'invalid-with-thirdparty' && _react2.default.createElement(_reactIntl.FormattedMessage, _messages2.default.passwordErrorInvalidWithThirdParty)
          )
        ),
        _react2.default.createElement(
          _components.Button,
          _extends({
            variant: 'green',
            type: 'submit'
          }, loading ? { inputButtonClass: 'loading' } : {}, loading || isLoggedIn || !valid ? { disabled: true } : {}),
          loading && _react2.default.createElement(
            _components.ButtonLabel,
            null,
            _react2.default.createElement(_reactIntl.FormattedMessage, _messages2.default.loading)
          ),
          loading && _react2.default.createElement(_components.LoadingButton, null),
          isLoggedIn && _react2.default.createElement(
            _components.ButtonLabel,
            null,
            _react2.default.createElement(_reactIntl.FormattedMessage, _messages2.default.alreadyLoggedIn)
          ),
          !loading && !isLoggedIn && _react2.default.createElement(
            _components.ButtonLabel,
            null,
            _react2.default.createElement(_reactIntl.FormattedMessage, _messages2.default.signup)
          )
        ),
        _react2.default.createElement(
          'p',
          null,
          _react2.default.createElement(_reactIntl.FormattedMessage, _extends({}, _messages2.default.bySigningUpYouAccept, {
            values: {
              termsOfServiceLink: _react2.default.createElement(
                _components.Link,
                { to: '/terms-of-service', target: '_blank' },
                _react2.default.createElement(_reactIntl.FormattedMessage, _messages2.default.termsOfService)
              ),
              privacyPolicyLink: _react2.default.createElement(
                _components.Link,
                { to: '/privacy-policy', target: '_blank' },
                _react2.default.createElement(_reactIntl.FormattedMessage, _messages2.default.privacyPolicy)
              )
            }
          }))
        )
      );
    }
  }]);

  return SignupTab;
}(_react.Component);

SignupTab.propTypes = {
  isLoggedIn: _propTypes2.default.bool.isRequired,
  loading: _propTypes2.default.bool.isRequired,
  valid: _propTypes2.default.bool.isRequired,
  name: _propTypes2.default.string.isRequired,
  nameValid: _propTypes2.default.bool,
  nameError: _propTypes2.default.string,
  email: _propTypes2.default.string.isRequired,
  emailValid: _propTypes2.default.bool,
  emailError: _propTypes2.default.string,
  password: _propTypes2.default.string.isRequired,
  passwordValid: _propTypes2.default.bool,
  passwordError: _propTypes2.default.string,
  apiError: _propTypes2.default.string,

  onClickBack: _propTypes2.default.func.isRequired,
  onClickCloseApiError: _propTypes2.default.func.isRequired,
  onChangeSignupName: _propTypes2.default.func.isRequired,
  onChangeSignupEmail: _propTypes2.default.func.isRequired,
  onChangeSignupPassword: _propTypes2.default.func.isRequired,
  onSubmit: _propTypes2.default.func.isRequired,

  intl: _reactIntl.intlShape.isRequired
};
SignupTab.defaultProps = {
  nameValid: true,
  nameError: null,
  emailValid: true,
  emailError: null,
  passwordValid: true,
  passwordError: null,
  apiError: null
};


var mapStateToProps = function mapStateToProps(state) {
  return {
    isLoggedIn: !!state.user.data.accessToken,
    loading: state.user.signup.loading,
    valid: !!state.user.signup.name.valid && !!state.user.signup.email.valid && !!state.user.signup.password.valid,
    name: state.user.signup.name.value,
    nameValid: state.user.signup.name.valid,
    nameError: state.user.signup.name.error,
    email: state.user.signup.email.value,
    emailValid: state.user.signup.email.valid,
    emailError: state.user.signup.email.error,
    password: state.user.signup.password.value,
    passwordValid: state.user.signup.password.valid,
    passwordError: state.user.signup.password.error,
    apiError: state.user.signup.errors.api
  };
};

var mapDispatchToProps = function mapDispatchToProps(dispatch) {
  return {
    onClickBack: function onClickBack() {
      return dispatch((0, _actions.hideAuthenticationDialog)());
    },
    onClickCloseApiError: function onClickCloseApiError() {
      return dispatch((0, _actions.dismissSignupApiError)());
    },
    onChangeSignupName: function onChangeSignupName(event) {
      return dispatch((0, _actions.changeSignupName)(event.target.value));
    },
    onChangeSignupEmail: function onChangeSignupEmail(event) {
      return dispatch((0, _actions.changeSignupEmail)(event.target.value));
    },
    onChangeSignupPassword: function onChangeSignupPassword(event) {
      return dispatch((0, _actions.changeSignupPassword)(event.target.value));
    },
    onSubmit: function onSubmit(event) {
      event.preventDefault();
      dispatch((0, _actions.signup)());
    }
  };
};

exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)((0, _reactIntl.injectIntl)(SignupTab));