'use strict';

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

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _Label = require('../../components/Label');

var _Label2 = _interopRequireDefault(_Label);

var _HelpText = require('../../components/HelpText');

var _HelpText2 = _interopRequireDefault(_HelpText);

var _Callout = require('../../components/Callout');

var _Callout2 = _interopRequireDefault(_Callout);

var _FieldContent = require('./styles/FieldContent');

var _FieldContent2 = _interopRequireDefault(_FieldContent);

var _HelpIcon = require('./styles/HelpIcon');

var _HelpIcon2 = _interopRequireDefault(_HelpIcon);

var _LabelContainer = require('./styles/LabelContainer');

var _LabelContainer2 = _interopRequireDefault(_LabelContainer);

var _lodash = require('lodash');

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

/**
 * A single Field element. **Important:** Field cannot be used on its own. Please use Field
 * within the Fields component. See: [Fields](#!/Fields)
 */
var Field = function (_React$Component) {
  (0, _inherits3.default)(Field, _React$Component);

  function Field() {
    var _ref;

    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, Field);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Field.__proto__ || (0, _getPrototypeOf2.default)(Field)).call.apply(_ref, [this].concat(args))), _this), _this.stylesFor = function (gridName) {
      var _this$props = _this.props,
          column = _this$props.column,
          columnSpan = _this$props.columnSpan;


      var endColumn = column + columnSpan - 1;
      return {
        gridArea: '' + gridName + column + ' / ' + gridName + column + ' / ' + gridName + endColumn + ' / ' + gridName + endColumn,
        // align-self determines how the parts vertically align if an adjacent part is taller.
        // labels should stick to the bottom if an adjacent label has two or more lines.
        // content and helpText should stick to the top if an adjacent element is taller than them.
        alignSelf: gridName === 'label' ? 'end' : 'start'
      };
    }, _this.renderLabel = function () {
      var _this$props2 = _this.props,
          label = _this$props2.label,
          disabled = _this$props2.disabled,
          required = _this$props2.required,
          Label = _this$props2.Label,
          children = _this$props2.children,
          helpCallout = _this$props2.helpCallout,
          helpCalloutProps = _this$props2.helpCalloutProps;


      if (!label) {
        return null;
      }

      var labelFor = (0, _lodash.get)(children, 'props.id', null);

      var labelProps = {
        disabled: disabled,
        required: required,
        htmlFor: labelFor
      };

      var HelpCallout = helpCallout && _react2.default.createElement(
        _Callout2.default,
        (0, _extends3.default)({ content: helpCallout }, helpCalloutProps),
        _react2.default.createElement(_HelpIcon2.default, { name: 'help' })
      );

      var LabelComponent = typeof label === 'string' ? _react2.default.createElement(
        Label,
        labelProps,
        label
      ) : _react2.default.cloneElement(label, labelProps);

      return _react2.default.createElement(
        _LabelContainer2.default,
        { style: _this.stylesFor('label') },
        LabelComponent,
        HelpCallout
      );
    }, _this.renderHelpText = function () {
      var _this$props3 = _this.props,
          helpText = _this$props3.helpText,
          error = _this$props3.error,
          HelpText = _this$props3.HelpText;


      if (!helpText) {
        return null;
      }

      var helpTextProps = {
        style: _this.stylesFor('helpText'),
        error: error
      };

      if (typeof helpText === 'string') {
        return _react2.default.createElement(
          HelpText,
          helpTextProps,
          helpText
        );
      }
      return _react2.default.cloneElement(helpText, helpTextProps);
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(Field, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          children = _props.children,
          Content = _props.Content,
          alignContent = _props.alignContent;


      return _react2.default.createElement(
        _react2.default.Fragment,
        null,
        this.renderLabel(),
        _react2.default.createElement(
          Content,
          { style: this.stylesFor('content'), align: alignContent },
          children
        ),
        this.renderHelpText()
      );
    }
  }]);
  return Field;
}(_react2.default.Component);

Field.propTypes = {
  /**
   * **Automatically supplied within <Fields>**
   * Do not supply this prop if you are using Field within a Fields component.
   * The column index to place this field at within its row.
   */
  column: _propTypes2.default.number,

  /**
   * The number of columns which this field should span within its row.
   */
  columnSpan: _propTypes2.default.number,
  /**
   * (stretch|left|right): the alignment of contents within the Field
   */
  alignContent: _propTypes2.default.oneOf(['stretch', 'left', 'right']),

  /**
   * A string or node to render in the label position. A string will be wrapped with the Label component prop.
   * If you provide a custom node, it will receive the htmlFor prop. Please assign this prop to a <label> element.
   */
  label: _propTypes2.default.node,
  /**
   * Indicates if the field is required by the form.
   */
  required: _propTypes2.default.bool,
  /**
   * Disables the form label.
   */
  disabled: _propTypes2.default.bool,
  /**
   * Contents to render inside the main field area.
   */
  children: _propTypes2.default.node,
  /**
   * A string or node to render in the help text position. A string will be wrapped with the HelpText component prop.
   */
  helpText: _propTypes2.default.node,
  /**
   * A component prop to override the component used to render labels. Defaults to library Label.
   */
  Label: _propTypes2.default.func,
  /**
   * A component prop to override the component used to render help text. Defaults to library HelpText.
   */
  HelpText: _propTypes2.default.func,
  /**
   * A component prop to override the component used to wrap field content. Defaults to library FieldContent.
   */
  Content: _propTypes2.default.func,
  /**
   * Content to render inside the callout.
   */
  helpCallout: _propTypes2.default.node,
  /**
   * Additional props for callout
   */
  helpCalloutProps: _propTypes2.default.shape({
    /**
     * Miliseconds to wait before showing the callout.
     */
    delay: _propTypes2.default.number,
    /**
     * Where to place the element. Use a value from react-popper
     */
    placement: _propTypes2.default.string,
    /**
     * Boundary for the callout; either a selector or a DOM element
     */
    boundary: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
    /**
     * Maximum width of the callout
     */
    maxWidth: _propTypes2.default.number
  })
};
Field.defaultProps = {
  column: 0,
  columnSpan: 1,
  Label: _Label2.default,
  HelpText: _HelpText2.default,
  Content: _FieldContent2.default,
  helpText: null,
  label: null,
  required: false,
  disabled: false,
  helpCallout: null,
  helpCalloutProps: {}
};
exports.default = Field;