'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _themeGet = require('../../../extensions/themeGet');

var _themeGet2 = _interopRequireDefault(_themeGet);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

var AREA = {
  LABEL: 'label',
  CONTENT: 'content',
  HELP_TEXT: 'helpText'
};

var copyArea = function copyArea(input, times) {
  return new Array(times).fill(input).map(function (text, index) {
    return '' + text + index;
  }).join(' ');
};

// Returns true if at least one child uses a label
var hasLabel = function hasLabel(children) {
  return _react2.default.Children.toArray(children).some(function (child) {
    return child.props.label && (typeof child.props.label !== 'string' || child.props.label.length > 0);
  });
};

// Returns true if at least one child uses help text
var hasHelpText = function hasHelpText(children) {
  return _react2.default.Children.toArray(children).some(function (child) {
    return child.props.helpText && (typeof child.props.helpText !== 'string' || child.props.helpText.length > 0);
  });
};

/*
 * We calculate whether we need the label and help text rows based on
 * whether any children need them. This helps deal with the gridGap,
 * as it will still be present if a grid area gets a size of zero.
 */
var includeArea = function includeArea(area, children) {
  if (area === AREA.LABEL) {
    return hasLabel(children);
  }
  if (area === AREA.HELP_TEXT) {
    return hasHelpText(children);
  }
  return true;
};

var calcGridAreas = function calcGridAreas(children) {
  return [AREA.LABEL, AREA.CONTENT, AREA.HELP_TEXT].filter(function (area) {
    return includeArea(area, children);
  });
};

var calcGridTemplateAreas = function calcGridTemplateAreas(children, columns) {
  return calcGridAreas(children).map(function (area) {
    return '"' + copyArea(area, columns) + '"';
  }).join('\n');
};

var calcGridTemplateRows = function calcGridTemplateRows(children) {
  return calcGridAreas(children).map(function () {
    return 'auto';
  }).join(' ');
};

var FieldRowDiv = _styledComponents2.default.div.withConfig({
  displayName: 'FieldRow__FieldRowDiv'
})(['@supports (display:grid){display:grid;grid-gap:var(--spacing-small) var(--spacing-large);}display:flex;']);

var FieldRow = function FieldRow(_ref) {
  var children = _ref.children,
      columns = _ref.columns,
      theme = _ref.theme;

  return _react2.default.createElement(
    FieldRowDiv,
    {
      style: {
        // each row has 3 sub-rows: label, content, helpText.
        // there's a named area for each column.
        gridTemplateAreas: calcGridTemplateAreas(children, columns),
        // each column has an equal size. To make fields larger than
        // adjacent fields, use the columnSpan prop on Field to span
        // multiple columns. This keeps all field sizes directly proportional
        gridTemplateColumns: 'repeat(' + columns + ', 1fr)',
        // label and helpText rows expand or contract as needed.
        // content row has a minimum size of 53px, and can expand as needed.
        gridTemplateRows: calcGridTemplateRows(children)
      }
    },
    children
  );
};

FieldRow.defaultProps = {
  columnCount: 2
};

exports.default = FieldRow;