import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React, { forwardRef } from 'react';
import PropTypes from 'prop-types';
import { isNil } from 'ramda';
import mapResponsiveProperty from '../utils/mapResponsiveProperty';
import * as Types from '../types';
import Box from '../Box';
import useTheme from '../hooks/useTheme';

var spanToWidth = function spanToWidth(maxColumns) {
  return function (columnSpan) {
    return columnSpan / maxColumns;
  };
};

var Col = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var span = _ref.span,
      maxColumnsProp = _ref.maxColumns,
      rest = _objectWithoutProperties(_ref, ["span", "maxColumns"]);

  var _useTheme = useTheme(),
      _useTheme$grid = _useTheme.grid;

  _useTheme$grid = _useTheme$grid === void 0 ? {} : _useTheme$grid;
  var gutters = _useTheme$grid.gutters,
      maxColumns = _useTheme$grid.maxColumns;
  return /*#__PURE__*/React.createElement(Box, _extends({
    ref: ref,
    px: gutters,
    width: mapResponsiveProperty(spanToWidth(isNil(maxColumnsProp) ? maxColumns : maxColumnsProp), span)
  }, rest));
});
Col.displayName = 'Col';
process.env.NODE_ENV !== "production" ? Col.propTypes = {
  maxColumns: PropTypes.number,
  span: Types.responsiveNumber
} : void 0;
export default Col;