'use strict';

var _extends = require('@babel/runtime/helpers/extends');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var isNil = require('../../node_modules/lodash-es/isNil.js');
require('core-js/modules/es.object.to-string.js');
require('core-js/modules/es.object.values.js');
require('core-js/modules/es.regexp.to-string.js');
var React = require('react');
var PropTypes = require('prop-types');
var classnames = require('classnames');
var colors = require('@carbon/colors');
var LayoutConstants = require('../../constants/LayoutConstants.js');
var cardUtilityFunctions = require('../../utils/cardUtilityFunctions.js');
var Button = require('../Button/Button.js');
var valueCardUtils = require('./valueCardUtils.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var _extends__default = /*#__PURE__*/_interopDefault(_extends);
var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
var React__default = /*#__PURE__*/_interopDefault(React);
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
var classnames__default = /*#__PURE__*/_interopDefault(classnames);

var propTypes = {
  value: PropTypes__default.default.any,
  // eslint-disable-line react/forbid-prop-types, react/require-default-props
  layout: PropTypes__default.default.oneOf(Object.values(LayoutConstants.CARD_LAYOUTS)),
  precision: PropTypes__default.default.number,
  color: PropTypes__default.default.string,
  locale: PropTypes__default.default.string,
  customFormatter: PropTypes__default.default.func,
  formatter: PropTypes__default.default.func,
  fontSize: PropTypes__default.default.number.isRequired,
  /** optional option to determine whether the number should be abbreviated (i.e. 10,000 = 10K) */
  isNumberValueCompact: PropTypes__default.default.bool.isRequired,
  testId: PropTypes__default.default.string,
  /** callback to trigger further action when clicking the value */
  onClick: PropTypes__default.default.func,
  dataSourceId: PropTypes__default.default.string.isRequired,
  measurementUnitLabel: PropTypes__default.default.string
};
var defaultProps = {
  layout: LayoutConstants.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.default.createElement("span", {
        "data-testid": "".concat(testId, "-boolean"),
        className: "".concat(valueCardUtils.BASE_CLASS_NAME, "__value-renderer--boolean")
      }, value.toString());
    } else if (typeof value === 'number') {
      renderValue = cardUtilityFunctions.formatNumberWithPrecision(value, precision, locale, isNumberValueCompact);
    } else if (isNil(value)) {
      renderValue = valueCardUtils.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__default.default("".concat(valueCardUtils.BASE_CLASS_NAME, "__value-renderer--value"), _defineProperty__default.default({}, "".concat(valueCardUtils.BASE_CLASS_NAME, "__value-renderer--value--vertical"), layout === LayoutConstants.CARD_LAYOUTS.VERTICAL)),
    style: {
      '--value-renderer-font-size': "".concat(fontSize, "px"),
      '--value-renderer-color': color || _onClick && colors.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.default.createElement("div", null, renderValue, " ", measurementUnitLabel) : renderValue
  };
  return /*#__PURE__*/React__default.default.createElement("div", {
    className: "".concat(valueCardUtils.BASE_CLASS_NAME, "__value-renderer--wrapper")
  }, _onClick ? /*#__PURE__*/React__default.default.createElement(Button, _extends__default.default({}, commonProps, {
    onClick: function onClick() {
      return _onClick({
        dataSourceId: dataSourceId,
        value: value
      });
    },
    kind: "ghost"
  }), measurementUnitLabel ? /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, renderValue, /*#__PURE__*/React__default.default.createElement("span", {
    className: "".concat(valueCardUtils.BASE_CLASS_NAME, "__value-renderer--value--measurement-unit")
  }, measurementUnitLabel)) : renderValue) : /*#__PURE__*/React__default.default.createElement("span", commonProps, measurementUnitLabel ? /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, renderValue, /*#__PURE__*/React__default.default.createElement("span", {
    className: "".concat(valueCardUtils.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;

module.exports = ValueRenderer$1;
