'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');

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

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

var FieldRow = function FieldRow(_ref) {
  var children = _ref.children,
      columns = _ref.columns,
      theme = _ref.theme;
  return _react2.default.createElement(
    'div',
    {
      style: {
        display: 'grid',
        // each row has 3 sub-rows: label, content, helpText.
        // there's a named area for each column.
        gridTemplateAreas: ['"' + copyArea('label', columns) + '"', '"' + copyArea('content', columns) + '"', '"' + copyArea('helpText', columns) + '"'].join('\n'),
        // defines spacing between rows and columns
        gridGap: (0, _themeGet2.default)('spacing.extraSmall')({ theme: theme }) + ' ' + (0, _themeGet2.default)('spacing.large')({ theme: theme }),
        // 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: 'auto minmax(53px, auto) auto'
      }
    },
    children
  );
};

FieldRow.defaultProps = {
  columnCount: 2
};

exports.default = (0, _styledComponents.withTheme)(FieldRow);