'use strict';

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

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 _lodash = require('lodash');

var _lodash2 = _interopRequireDefault(_lodash);

var _recompose = require('recompose');

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

var _Label2 = _interopRequireDefault(_Label);

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

var _HelpText2 = _interopRequireDefault(_HelpText);

var _FlowItemContainer = require('./styles/FlowItemContainer');

var _FlowItemContainer2 = _interopRequireDefault(_FlowItemContainer);

var _FlowItemContent = require('./styles/FlowItemContent');

var _FlowItemContent2 = _interopRequireDefault(_FlowItemContent);

var _FlowItemFlexibleContent = require('./styles/FlowItemFlexibleContent');

var _FlowItemFlexibleContent2 = _interopRequireDefault(_FlowItemFlexibleContent);

var _FlowItemMoreContent = require('./styles/FlowItemMoreContent');

var _FlowItemMoreContent2 = _interopRequireDefault(_FlowItemMoreContent);

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

/**
 * @deprecated
 * See /layouts/Fields for new layout mechanisms for form fields
 *
 * Flow.Item is an individual element in the Flow system. It annotates the provided
 * content with a label, help text, and ensures correct layout with sibling elements when used properly inside
 * a Flow.Row. Flow.Item includes some advanced props like `moreContent` and `flexibleContent` to further
 * customize the way it looks and behaves.
 *
 * @class FlowItem
 * @extends {React.Component}
 */
var FlowItem = function (_React$Component) {
  (0, _inherits3.default)(FlowItem, _React$Component);

  function FlowItem() {
    var _ref;

    var _temp, _this, _ret;

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

    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 = FlowItem.__proto__ || (0, _getPrototypeOf2.default)(FlowItem)).call.apply(_ref, [this].concat(args))), _this), _this.renderLabel = function () {
      var _this$props = _this.props,
          label = _this$props.label,
          Label = _this$props.Label;


      if (!!label && _lodash2.default.isString(label)) {
        return _react2.default.createElement(
          Label,
          { className: 'FlowItem-label' },
          label
        );
      }

      // always render some label, even if blank, to keep layout consistent
      return label || _react2.default.createElement(Label, { className: 'FlowItem-label' });
    }, _this.renderChildren = function () {
      var _this$props2 = _this.props,
          flexibleContent = _this$props2.flexibleContent,
          FlexibleContent = _this$props2.FlexibleContent,
          Content = _this$props2.Content,
          children = _this$props2.children;


      if (flexibleContent) {
        return _react2.default.createElement(
          FlexibleContent,
          null,
          children
        );
      }
      return _react2.default.createElement(
        Content,
        null,
        children
      );
    }, _this.renderHelpText = function () {
      var _this$props3 = _this.props,
          helpText = _this$props3.helpText,
          error = _this$props3.error,
          HelpText = _this$props3.HelpText;


      if (_lodash2.default.isString(helpText)) {
        return _react2.default.createElement(
          HelpText,
          { className: 'FlowItem-helpText', error: error },
          helpText
        );
      } else if (helpText && helpText.props) {
        return _react2.default.cloneElement(helpText, { error: error });
      } else if (!helpText && error) {
        return _react2.default.createElement(
          HelpText,
          { className: 'FlowItem-helpText', error: true },
          error
        );
      }

      return helpText || null;
    }, _this.renderMoreContent = function () {
      var _this$props4 = _this.props,
          moreContent = _this$props4.moreContent,
          MoreContent = _this$props4.MoreContent;

      if (moreContent) {
        return _react2.default.createElement(
          MoreContent,
          null,
          moreContent
        );
      }
      return null;
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(FlowItem, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          id = _props.id,
          className = _props.className,
          Container = _props.Container;

      return _react2.default.createElement(
        Container,
        { alignment: this.props.alignment, id: id, className: className },
        this.renderLabel(),
        this.renderChildren(),
        this.renderHelpText(),
        this.renderMoreContent()
      );
    }
  }]);
  return FlowItem;
}(_react2.default.Component);

FlowItem.propTypes = {
  /**
   * A label for this item. May be a Label instance or a string.
   */
  label: _propTypes2.default.node,
  /**
   * Help text for this item. May be a HelpText instance or a string.
   */
  helpText: _propTypes2.default.node,
  /**
   * Contents of this item. This goes between the label and the help text.
   */
  children: _propTypes2.default.node,
  /**
   * More contents for this item. This goes below the help text and extends the size
   * of the component.
   */
  moreContent: _propTypes2.default.node,
  /**
   * Allows the main content to grow larger than the default fixed size.
   */
  flexibleContent: _propTypes2.default.bool,
  /**
   * Aligns the various elements within the item to a particular side.
   */
  alignment: _propTypes2.default.oneOf(['stretch', 'left', 'right']),
  /**
   * Whether this item should render a visual error state.
   */
  error: _propTypes2.default.bool,
  /**
   * An id to add to the item container element.
   */
  id: _propTypes2.default.string,
  /**
   * A class name to add to the item container element.
   */
  className: _propTypes2.default.string,
  /**
   * A component for rendering the containing element
   */
  Container: _propTypes2.default.func,
  /**
   * A component for rendering the content area
   */
  Content: _propTypes2.default.func,
  /**
   * A component for rendering content that is flexible in size
   */
  FlexibleContent: _propTypes2.default.func,
  /**
   * A component for rendering the 'more content' area
   */
  MoreContent: _propTypes2.default.func,
  /**
   * Allows overriding the default Label component
   */
  Label: _propTypes2.default.func,
  /**
   * Allows overriding the default HelpText component
   */
  HelpText: _propTypes2.default.func
};
FlowItem.defaultProps = {
  label: null,
  helpText: null,
  children: null,
  moreContent: null,
  flexibleContent: false,
  error: false,
  id: null,
  className: null,
  alignment: 'stretch',
  Container: _FlowItemContainer2.default,
  Content: _FlowItemContent2.default,
  FlexibleContent: _FlowItemFlexibleContent2.default,
  MoreContent: _FlowItemMoreContent2.default,
  Label: _Label2.default,
  HelpText: _HelpText2.default
};


FlowItem.Small = (0, _recompose.withProps)({
  Container: _FlowItemContainer2.default.Small
})(FlowItem);

exports.default = FlowItem;