'use strict';

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
require('core-js/modules/es.array.concat.js');
require('core-js/modules/es.array.fill.js');
require('core-js/modules/es.number.is-integer.js');
var React = require('react');
var react = require('@carbon/react');
var PropTypes = require('prop-types');
var colors = require('@carbon/colors');
var classnames = require('classnames');
var useMerged = require('../../hooks/useMerged.js');
var Settings = require('../../constants/Settings.js');
var useMatchingThreshold = require('../../hooks/useMatchingThreshold.js');
var thresholdPropTypes = require('./thresholdPropTypes.js');

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

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 prefix = Settings.settings.prefix,
  iotPrefix = Settings.settings.iotPrefix;
var propTypes = {
  className: PropTypes__default.default.string,
  /* the label show above the bar */
  label: PropTypes__default.default.string.isRequired,
  /* the text shown below the bar */
  helperText: PropTypes__default.default.string,
  /* if true, hide the label  */
  hideLabel: PropTypes__default.default.bool,
  /** When true, show the inline variant without an icon or label */
  inline: PropTypes__default.default.bool,
  /* the number used to fill the bar */
  value: PropTypes__default.default.number.isRequired,
  /* the unit shown beside the value label text */
  valueUnit: PropTypes__default.default.string,
  /**
   * the maximum value this bar supports, values higher trigger the `over` class to style the
   * value label text differently
   */
  max: PropTypes__default.default.number,
  /* If true, the bar area is white, for use with a gray background */
  light: PropTypes__default.default.bool,
  /**
   * An array of threshold objects to compare the value against and change the icon and/or
   * bar colors based on matching criteria
   */
  thresholds: PropTypes__default.default.arrayOf(PropTypes__default.default.oneOfType([thresholdPropTypes.ThresholdComparisonPropType, thresholdPropTypes.ThresholdComparisonFunctionPropType])),
  /**
   * renders an icon beside the value label text
   */
  renderIcon: PropTypes__default.default.oneOfType([PropTypes__default.default.func, PropTypes__default.default.object, PropTypes__default.default.string]),
  /**
   * Callback called when a threshold determines what icon to render based on a string for the icon
   *    example usage: renderIconByName(name = 'my--checkmark--icon', props = { title: 'A checkmark', etc. })
   */
  renderIconByName: PropTypes__default.default.func,
  /**
   * i18n prop for adding an aria label to the icon
   */
  i18n: PropTypes__default.default.shape({
    iconLabel: PropTypes__default.default.string
  })
};
var defaultProps = {
  className: undefined,
  helperText: '',
  hideLabel: false,
  inline: false,
  light: false,
  thresholds: [],
  max: 100,
  valueUnit: '%',
  renderIcon: undefined,
  renderIconByName: undefined,
  i18n: {
    iconLabel: 'Progress bar icon'
  }
};
var DEFAULT_PROGRESS_BAR_COLOR = colors.blue60;
var ProgressBar = function ProgressBar(_ref) {
  var _matchingThreshold$ic, _matchingThreshold$co, _matchingThreshold$co2;
  var className = _ref.className,
    helperText = _ref.helperText,
    hideLabel = _ref.hideLabel,
    i18n = _ref.i18n,
    inline = _ref.inline,
    label = _ref.label,
    light = _ref.light,
    max = _ref.max,
    renderIcon = _ref.renderIcon,
    renderIconByName = _ref.renderIconByName,
    thresholds = _ref.thresholds,
    value = _ref.value,
    valueUnit = _ref.valueUnit;
  var mergedI18n = useMerged(defaultProps.i18n, i18n);
  var matchingThreshold = useMatchingThreshold({
    thresholds: thresholds,
    value: value
  });
  var Icon = (_matchingThreshold$ic = matchingThreshold === null || matchingThreshold === void 0 ? void 0 : matchingThreshold.icon) !== null && _matchingThreshold$ic !== void 0 ? _matchingThreshold$ic : renderIcon;
  var hasColorObject = typeof (matchingThreshold === null || matchingThreshold === void 0 || (_matchingThreshold$co = matchingThreshold.color) === null || _matchingThreshold$co === void 0 ? void 0 : _matchingThreshold$co.fill) === 'string';
  var matchingFillColor = (_matchingThreshold$co2 = matchingThreshold === null || matchingThreshold === void 0 ? void 0 : matchingThreshold.color) !== null && _matchingThreshold$co2 !== void 0 ? _matchingThreshold$co2 : DEFAULT_PROGRESS_BAR_COLOR;
  var fillColor = hasColorObject ? matchingThreshold.color.fill : matchingFillColor;
  var strokeColor = hasColorObject ? matchingThreshold.color.stroke : undefined;
  var valueAndUnitString = Number.isInteger(value) ? "".concat(value).concat(valueUnit) : '';

  /**
   * helper to render the value and unit
   *
   * @returns JSXElement
   */
  var valueAndUnit = /*#__PURE__*/React__default.default.createElement("span", {
    className: classnames__default.default("".concat(iotPrefix, "--progress-bar__value-label"), _defineProperty__default.default(_defineProperty__default.default({}, "".concat(iotPrefix, "--progress-bar__value-label--over"), value > max), "".concat(iotPrefix, "--progress-bar__value-label--inline"), inline)),
    title: valueAndUnitString
  }, valueAndUnitString);

  /**
   * When the progress bar is not using the inline variant, render the label and icon
   * above the progress bar.
   *
   * @returns JSX Element
   */
  var progressBarLabel = /*#__PURE__*/React__default.default.createElement("div", {
    className: classnames__default.default("".concat(iotPrefix, "--progress-bar__label--right"), _defineProperty__default.default({}, "".concat(prefix, "--visually-hidden"), hideLabel))
  }, Icon ? /*#__PURE__*/React__default.default.createElement("span", {
    className: "".concat(iotPrefix, "--progress-bar__icon"),
    "data-testid": "progress-bar-icon"
  }, renderIconByName && typeof Icon === 'string' ? renderIconByName(Icon, {
    fill: fillColor,
    stroke: strokeColor,
    'aria-label': mergedI18n.iconLabel
  }) : /*#__PURE__*/React__default.default.createElement(Icon, {
    fill: fillColor,
    stroke: strokeColor,
    "aria-label": mergedI18n.iconLabel
  })) : null, valueAndUnit);

  /**
   * helper method to render the progress bar with a div wrapper for the inline variant
   *
   * @returns JSXElement
   */
  var progressBarWithInlineWrapper = /*#__PURE__*/React__default.default.createElement("div", {
    className: "".concat(iotPrefix, "--progress-bar-wrapper--inline")
  }, /*#__PURE__*/React__default.default.createElement(react.ProgressBar, {
    label: label,
    helperText: undefined,
    hideLabel: true,
    value: value,
    max: max
  }), valueAndUnit);
  return /*#__PURE__*/React__default.default.createElement("div", {
    className: classnames__default.default("".concat(iotPrefix, "--progress-bar-container"), _defineProperty__default.default(_defineProperty__default.default({}, "".concat(iotPrefix, "--progress-bar-container--light"), light), "".concat(iotPrefix, "--progress-bar-container--with-icon"), Icon), className),
    "data-testid": "progress-bar-container",
    style: {
      '--progress-bar-fill-color': fillColor,
      '--progress-bar-stroke-color': strokeColor
    }
  }, inline ? progressBarWithInlineWrapper : /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, progressBarLabel, /*#__PURE__*/React__default.default.createElement(react.ProgressBar, {
    label: label,
    helperText: helperText,
    hideLabel: hideLabel,
    value: value,
    max: max
  })));
};
ProgressBar.propTypes = propTypes;
ProgressBar.defaultProps = defaultProps;
ProgressBar.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "ProgressBar",
  "props": {
    "className": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "helperText": {
      "defaultValue": {
        "value": "''",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "hideLabel": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "inline": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "When true, show the inline variant without an icon or label",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "light": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "thresholds": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "description": "An array of threshold objects to compare the value against and change the icon and/or\nbar colors based on matching criteria",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "union",
          "value": [{
            "name": "custom",
            "raw": "ThresholdComparisonPropType"
          }, {
            "name": "custom",
            "raw": "ThresholdComparisonFunctionPropType"
          }]
        }
      },
      "required": false
    },
    "max": {
      "defaultValue": {
        "value": "100",
        "computed": false
      },
      "description": "the maximum value this bar supports, values higher trigger the `over` class to style the\nvalue label text differently",
      "type": {
        "name": "number"
      },
      "required": false
    },
    "valueUnit": {
      "defaultValue": {
        "value": "'%'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "renderIcon": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "renders an icon beside the value label text",
      "type": {
        "name": "union",
        "value": [{
          "name": "func"
        }, {
          "name": "object"
        }, {
          "name": "string"
        }]
      },
      "required": false
    },
    "renderIconByName": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "Callback called when a threshold determines what icon to render based on a string for the icon\n   example usage: renderIconByName(name = 'my--checkmark--icon', props = { title: 'A checkmark', etc. })",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "i18n": {
      "defaultValue": {
        "value": "{\n  iconLabel: 'Progress bar icon',\n}",
        "computed": false
      },
      "description": "i18n prop for adding an aria label to the icon",
      "type": {
        "name": "shape",
        "value": {
          "iconLabel": {
            "name": "string",
            "required": false
          }
        }
      },
      "required": false
    },
    "label": {
      "description": "",
      "type": {
        "name": "string"
      },
      "required": true
    },
    "value": {
      "description": "",
      "type": {
        "name": "number"
      },
      "required": true
    }
  }
};
var ProgressBar$1 = ProgressBar;

module.exports = ProgressBar$1;
