import React from 'react';
import PropTypes from 'prop-types';
import { Box } from 'grommet/es6/components/Box';
import { Text } from 'grommet/es6/components/Text';


var LABEL_SIZE_MAP = {
  xsmall: 'xsmall',
  small: 'xsmall',
  medium: 'xsmall',
  large: 'small',
  xlarge: 'medium',
  xxlarge: 'large'
};
var Value = function Value(_ref) {
  var label = _ref.label,
      value = _ref.value,
      size = _ref.size,
      weight = _ref.weight,
      gap = _ref.gap,
      units = _ref.units,
      color = _ref.color;
  return React.createElement(
    Box,
    { gap: gap },
    React.isValidElement(value) ? value : React.createElement(
      Text,
      { size: size, weight: weight, color: color },
      '' + (value !== undefined ? value : '-') + (units ? ' ' + units : '')
    ),
    React.createElement(
      Box,
      { alignSelf: 'end' },
      React.createElement(
        Text,
        { size: LABEL_SIZE_MAP[size], color: color },
        label
      )
    )
  );
};

Value.defaultProps = {
  label: undefined,
  value: undefined,
  weight: 'bold',
  gap: 'small',
  size: 'large',
  color: undefined
};

Value.propTypes = {
  label: PropTypes.string,
  color: PropTypes.string,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.number]),
  weight: PropTypes.oneOfType([PropTypes.oneOf(['normal', 'bold']), PropTypes.number]),
  gap: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge']),
  size: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge'])
};

var ValueDoc = void 0;
if (process.env.NODE_ENV !== 'production') {
  ValueDoc = require('./doc').default(Value); // eslint-disable-line global-require
}

var ValueWrapper = ValueDoc || Value;

export { ValueWrapper as Value };