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; }

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import './style.css';
import { InputContext, FormContext } from './context';

/* eslint-disable react/no-unused-state */

var Input = function Input(props) {
  var _classNames;

  var inline = props.inline,
      classes = props.classes,
      labelText = props.labelText,
      hiddenLabel = props.hiddenLabel,
      required = props.required,
      disabled = props.disabled,
      id = props.id;

  var inputClasses = classNames((_classNames = {
    'ma__input-group': true,
    'ma__input-group--inline': inline
  }, _classNames[classes && classes.length > 0 && classes.join(' ')] = true, _classNames));
  var inputLabelClasses = classNames({
    ma__label: true,
    'ma__label--hidden': labelText && hiddenLabel,
    'ma__label--required': labelText && required,
    'ma__label--optional': labelText && !required,
    'ma__label--disabled': labelText && disabled
  });
  // InputProvider will get the same props.children as Input.
  return React.createElement(
    React.Fragment,
    null,
    React.createElement(
      'div',
      { className: inputClasses },
      labelText && React.createElement(
        'label',
        { htmlFor: id, className: inputLabelClasses },
        labelText
      ),
      React.createElement(InputProvider, props)
    )
  );
};

Input.propTypes = process.env.NODE_ENV !== "production" ? {
  id: PropTypes.string,
  labelText: PropTypes.string,
  hiddenLabel: PropTypes.bool,
  required: PropTypes.bool,
  inline: PropTypes.bool,
  disabled: PropTypes.bool,
  classes: PropTypes.arrayOf(PropTypes.string)
} : {};

// Anything within a provider always re-renders when state changes.
// Using keys will not prevent this because each child in the provider
// is created with React.createElement, which makes a new object every render.
// This class is so that the label does not re-render for every state change.

var InputProvider = function (_React$Component) {
  _inherits(InputProvider, _React$Component);

  function InputProvider(props) {
    _classCallCheck(this, InputProvider);

    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));

    _this.getValue = function () {
      return _this.state.value;
    };

    _this.setValue = function (value, afterUpdate) {
      _this.setState({ value: value }, afterUpdate);
    };

    _this.updateState = function (newState, afterUpdate) {
      _this.setState(newState, afterUpdate);
    };

    _this.checkFormContext = function (formContext) {
      if (formContext.isActive) {
        // By giving the form getters and setters and not the input value,
        // extra re-renders are avoided when context updates.
        if (!Object.prototype.hasOwnProperty.call(formContext.value, _this.props.id)) {
          var value = formContext.value;

          value[_this.props.id] = { getValue: _this.getValue, setValue: _this.setValue };
          formContext.updateState({ value: value });
        }
      }
    };

    _this.state = {
      value: _this.props.defaultValue,
      getValue: _this.getValue,
      setValue: _this.setValue,
      updateState: _this.updateState,
      showError: false,
      errorMsg: _this.props.errorMsg,
      disabled: _this.props.disabled,
      inline: _this.props.inline
    };
    return _this;
  }

  InputProvider.prototype.render = function render() {
    return React.createElement(
      InputContext.Provider,
      { value: this.state },
      React.createElement(
        FormContext.Consumer,
        null,

        // Currently, this is called on every render of InputProvider.
        // @TODO: Pull this out of here when InputProvider.contextType is supported
        // and do this logic in componentDidUpdate.
        // InputProvider.contextType should be set to FormContext.
        this.checkFormContext
      ),
      React.createElement(
        'div',
        { className: 'ma__input-group-right' },
        this.props.children
      )
    );
  };

  return InputProvider;
}(React.Component);

Input.contextType = InputContext;

InputProvider.propTypes = process.env.NODE_ENV !== "production" ? {
  inline: PropTypes.bool,
  id: PropTypes.string,
  children: PropTypes.node,
  disabled: PropTypes.bool,
  errorMsg: PropTypes.string,
  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number]),
  classes: PropTypes.arrayOf(PropTypes.string)
} : {};

export default Input;