import _extends from '@babel/runtime/helpers/extends';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import isNil from '../../node_modules/lodash-es/isNil.js';
import 'core-js/modules/es.object.to-string.js';
import 'core-js/modules/es.object.values.js';
import 'core-js/modules/es.regexp.to-string.js';
import React__default from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { blue60 } from '@carbon/colors';
import { CARD_LAYOUTS } from '../../constants/LayoutConstants.js';
import { formatNumberWithPrecision } from '../../utils/cardUtilityFunctions.js';
import Button from '../Button/Button.js';
import { BASE_CLASS_NAME, PREVIEW_DATA } from './valueCardUtils.js';

var propTypes = {
  value: PropTypes.any,
  // eslint-disable-line react/forbid-prop-types, react/require-default-props
  layout: PropTypes.oneOf(Object.values(CARD_LAYOUTS)),
  precision: PropTypes.number,
  color: PropTypes.string,
  locale: PropTypes.string,
  customFormatter: PropTypes.func,
  formatter: PropTypes.func,
  fontSize: PropTypes.number.isRequired,
  /** optional option to determine whether the number should be abbreviated (i.e. 10,000 = 10K) */
  isNumberValueCompact: PropTypes.bool.isRequired,
  testId: PropTypes.string,
  /** callback to trigger further action when clicking the value */
  onClick: PropTypes.func,
  dataSourceId: PropTypes.string.isRequired,
  measurementUnitLabel: PropTypes.string
};
var defaultProps = {
  layout: CARD_LAYOUTS.HORIZONTAL,
  precision: 0,
  color: null,
  locale: 'en',
  customFormatter: null,
  formatter: null,
  testId: 'value',
  onClick: null,
  measurementUnitLabel: null
};

/**
 * This components job is determining how to render different kinds of card values.
 * It handles precision, font size, styling in a consistent way for card values.
 *
 */
var ValueRenderer = function ValueRenderer(_ref) {
  var value = _ref.value,
    layout = _ref.layout,
    precision = _ref.precision,
    color = _ref.color,
    locale = _ref.locale,
    customFormatter = _ref.customFormatter,
    formatter = _ref.formatter,
    fontSize = _ref.fontSize,
    isNumberValueCompact = _ref.isNumberValueCompact,
    testId = _ref.testId,
    _onClick = _ref.onClick,
    dataSourceId = _ref.dataSourceId,
    measurementUnitLabel = _ref.measurementUnitLabel;
  var ctx = {
    locale: locale,
    precision: precision,
    unit: measurementUnitLabel,
    isNumberValueCompact: isNumberValueCompact,
    layout: layout,
    dataSourceId: dataSourceId
  };
  var renderValue;
  var formatterNullish = false;
  var formatterError = false;
  // Feed the value and context into the formatter function, if it exists.
  if (typeof formatter === 'function') {
    try {
      var out = formatter(value, ctx);
      // Catches null and undefined values from formatter, but allows (0, '', false)
      if (out !== null && out !== undefined) {
        renderValue = out;
      } else {
        formatterNullish = true;
      }
    } catch (e) {
      // Turns on the flag, to keep a global reference of the error occuring.
      formatterError = true;
    }
  }
  if (renderValue === undefined) {
    renderValue = value;
    if (typeof value === 'boolean') {
      renderValue = /*#__PURE__*/React__default.createElement("span", {
        "data-testid": "".concat(testId, "-boolean"),
        className: "".concat(BASE_CLASS_NAME, "__value-renderer--boolean")
      }, value.toString());
    } else if (typeof value === 'number') {
      renderValue = formatNumberWithPrecision(value, precision, locale, isNumberValueCompact);
    } else if (isNil(value)) {
      renderValue = PREVIEW_DATA;
    }
  }

  // If customFormatter was defined and either... formatter was not passed or there was an error with the formatter function, fall back to customFormatter logic.
  if (typeof customFormatter === 'function' && (!formatter || formatterError || formatterNullish)) {
    renderValue = customFormatter(renderValue, value);
  }
  var commonProps = {
    'data-testid': testId,
    className: classnames("".concat(BASE_CLASS_NAME, "__value-renderer--value"), _defineProperty({}, "".concat(BASE_CLASS_NAME, "__value-renderer--value--vertical"), layout === CARD_LAYOUTS.VERTICAL)),
    style: {
      '--value-renderer-font-size': "".concat(fontSize, "px"),
      '--value-renderer-color': color || _onClick && blue60,
      // if the font size is small enough to fit in the boundary box, wrap to 2 lines
      // otherwise, trucate the first line
      '--value-renderer-max-lines': fontSize < 20 ? 2 : 1
    },
    title: measurementUnitLabel ? /*#__PURE__*/React__default.createElement("div", null, renderValue, " ", measurementUnitLabel) : renderValue
  };
  return /*#__PURE__*/React__default.createElement("div", {
    className: "".concat(BASE_CLASS_NAME, "__value-renderer--wrapper")
  }, _onClick ? /*#__PURE__*/React__default.createElement(Button, _extends({}, commonProps, {
    onClick: function onClick() {
      return _onClick({
        dataSourceId: dataSourceId,
        value: value
      });
    },
    kind: "ghost"
  }), measurementUnitLabel ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderValue, /*#__PURE__*/React__default.createElement("span", {
    className: "".concat(BASE_CLASS_NAME, "__value-renderer--value--measurement-unit")
  }, measurementUnitLabel)) : renderValue) : /*#__PURE__*/React__default.createElement("span", commonProps, measurementUnitLabel ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderValue, /*#__PURE__*/React__default.createElement("span", {
    className: "".concat(BASE_CLASS_NAME, "__value-renderer--value--measurement-unit")
  }, measurementUnitLabel)) : renderValue));
};
ValueRenderer.propTypes = propTypes;
ValueRenderer.defaultProps = defaultProps;
ValueRenderer.__docgenInfo = {
  "description": "This components job is determining how to render different kinds of card values.\nIt handles precision, font size, styling in a consistent way for card values.",
  "methods": [],
  "displayName": "ValueRenderer",
  "props": {
    "layout": {
      "defaultValue": {
        "value": "CARD_LAYOUTS.HORIZONTAL",
        "computed": true
      },
      "description": "",
      "type": {
        "name": "enum",
        "computed": true,
        "value": "Object.values(CARD_LAYOUTS)"
      },
      "required": false
    },
    "precision": {
      "defaultValue": {
        "value": "0",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "number"
      },
      "required": false
    },
    "color": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "locale": {
      "defaultValue": {
        "value": "'en'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "customFormatter": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "formatter": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "testId": {
      "defaultValue": {
        "value": "'value'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "onClick": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "callback to trigger further action when clicking the value",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "measurementUnitLabel": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "value": {
      "description": "",
      "type": {
        "name": "any"
      },
      "required": false
    },
    "fontSize": {
      "description": "",
      "type": {
        "name": "number"
      },
      "required": true
    },
    "isNumberValueCompact": {
      "description": "optional option to determine whether the number should be abbreviated (i.e. 10,000 = 10K)",
      "type": {
        "name": "bool"
      },
      "required": true
    },
    "dataSourceId": {
      "description": "",
      "type": {
        "name": "string"
      },
      "required": true
    }
  }
};
var ValueRenderer$1 = ValueRenderer;

export { ValueRenderer$1 as default };
