import React from 'react';
import 'react-dom';
import { f as _inherits, g as _createClass, h as _classCallCheck, _ as _defineProperty, n as _assertThisInitialized, i as _getPrototypeOf, j as _possibleConstructorReturn } from '../_rollupPluginBabelHelpers-539c1155.js';
import PropTypes from 'prop-types';
import 'styled-components';
import '../index-930c2100.js';
import '../hooks/useActivify.js';
import '../overlays/tooltip.js';
import '../key_codes-a5a2b85e.js';
import '../index-6b96e57a.js';
import '@styled-system/space';
import '@styled-system/color';
import '@styled-system/border';
import '@styled-system/variant';
import '@styled-system/typography';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
import Icon from '../ui/icon.js';
import '../info-fc9c81b4.js';
import '../close-cd95ea58.js';
import '../close-v2-118f2b87.js';
import '../file_placeholder-51e080e8.js';
import '../arrow-e522a0cc.js';
import '../tick-ee41abaf.js';
import '../angle-down-4038e060.js';
import '../checkmark-b6f07b8e.js';
import '../search-da5a95f5.js';
import '../overlays/withTooltip.js';
import Odometer from '../ui/odometer.js';

var css = ".NumberCounter_numberCounter__2cWAh {\n  position: relative;\n  margin-bottom: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between; }\n\n.NumberCounter_numberCounterLabel__3Gzz5 {\n  display: block;\n  color: #666;\n  font-size: 12px;\n  font-weight: 600;\n  margin-bottom: 6px;\n  margin-left: 2px;\n  transition: 0.2s ease-out; }\n  .NumberCounter_numberCounterLabel__3Gzz5.NumberCounter_focused__2v2Nt {\n    color: #124fa0; }\n\n.NumberCounter_numberCounterError__aVXID .NumberCounter_numberCounterLabel__3Gzz5 {\n  color: #f44336; }\n\n.NumberCounter_numberCounterError__aVXID .NumberCounter_numberCounterInputWrapper__HLqTs {\n  color: #f44336;\n  border-color: #f44336;\n  background-color: rgba(244, 67, 54, 0.05); }\n\n.NumberCounter_counter__jXLSQ {\n  display: flex;\n  align-items: center; }\n  .NumberCounter_counter__jXLSQ.NumberCounter_isZero__6qZv4 {\n    color: #999; }\n  .NumberCounter_counter__jXLSQ .NumberCounter_counterButton__212fs {\n    width: 18px;\n    height: 18px;\n    transition: 0.2s ease-out; }\n    .NumberCounter_counter__jXLSQ .NumberCounter_counterButton__212fs svg g {\n      stroke: #124fa0; }\n    .NumberCounter_counter__jXLSQ .NumberCounter_counterButton__212fs.NumberCounter_disabled__zhR0p {\n      filter: grayscale(1);\n      pointer-events: none;\n      opacity: 0.4; }\n    .NumberCounter_counter__jXLSQ .NumberCounter_counterButton__212fs:first-child {\n      margin-right: 8px; }\n    .NumberCounter_counter__jXLSQ .NumberCounter_counterButton__212fs:last-child {\n      margin-left: 8px; }\n  .NumberCounter_counter__jXLSQ .NumberCounter_counterText__1n5z2 {\n    margin: 0 8px; }\n";
var styles = {"numberCounter":"NumberCounter_numberCounter__2cWAh","numberCounterLabel":"NumberCounter_numberCounterLabel__3Gzz5","focused":"NumberCounter_focused__2v2Nt","numberCounterError":"NumberCounter_numberCounterError__aVXID","numberCounterInputWrapper":"NumberCounter_numberCounterInputWrapper__HLqTs","counter":"NumberCounter_counter__jXLSQ","isZero":"NumberCounter_isZero__6qZv4","counterButton":"NumberCounter_counterButton__212fs","disabled":"NumberCounter_disabled__zhR0p","counterText":"NumberCounter_counterText__1n5z2"};
styleInject(css);

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

var NumberCounter =
/*#__PURE__*/
function (_React$Component) {
  _inherits(NumberCounter, _React$Component);

  var _super = _createSuper(NumberCounter);

  function NumberCounter() {
    var _this;

    _classCallCheck(this, NumberCounter);

    _this = _super.call(this);

    _defineProperty(_assertThisInitialized(_this), "_renderError", function (errorMessage) {
      return React.createElement("span", {
        className: styles.numberCounterInputWrapperError
      }, errorMessage);
    });

    _defineProperty(_assertThisInitialized(_this), "_handleChange", function (change) {
      return function () {
        var max = _this.props.max || 100000;
        var value = _this.props.value + change;
        if (value < 0) return;
        if (value > max) return;

        _this.props.onChange(value);
      };
    });

    _this.state = {
      focused: false
    };
    return _this;
  }

  _createClass(NumberCounter, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          prefixClassName = _this$props.prefixClassName,
          className = _this$props.className,
          _this$props$value = _this$props.value,
          value = _this$props$value === void 0 ? "" : _this$props$value,
          label = _this$props.label,
          error = _this$props.error,
          errorMessage = _this$props.errorMessage,
          errorMsgClassName = _this$props.errorMsgClassName,
          _this$props$max = _this$props.max,
          max = _this$props$max === void 0 ? 100000 : _this$props$max;
      var errorClassName = error ? styles.numberCounterError : "";
      var focusedClassName = this.state.focused ? styles.focused : "";
      var minusDisabledClassName = value === 0 ? styles.disabled : "";
      var plusDisabledClassName = value >= max ? styles.disabled : "";
      var isZeroClassName = value === 0 ? styles.isZero : "";
      return React.createElement("div", {
        className: "".concat(styles.numberCounter, " ").concat(errorClassName, " ").concat(prefixClassName, " ").concat(className),
        "data-testid": "numberCounter"
      }, label && React.createElement("span", {
        className: "".concat(prefixClassName, "-label ").concat(errorClassName, " ").concat(styles.numberCounterLabel, " ").concat(focusedClassName)
      }, label), React.createElement("div", {
        className: "".concat(prefixClassName, "-wrapper ").concat(styles.counter, " ").concat(isZeroClassName)
      }, React.createElement(Icon, {
        onClick: this._handleChange(-1),
        src: "minus",
        className: "".concat(prefixClassName, "-subtract ").concat(styles.counterButton, " ").concat(minusDisabledClassName)
      }), React.createElement(Odometer, {
        className: "".concat(prefixClassName, "-odometer")
      }, value.toString()), React.createElement(Icon, {
        onClick: this._handleChange(1),
        src: "plus2",
        className: "".concat(prefixClassName, "-add ").concat(styles.counterButton, " ").concat(plusDisabledClassName)
      })), error && React.createElement("div", {
        className: "".concat(prefixClassName, "-error ").concat(errorMsgClassName, " ").concat(styles.numberCounterInputWrapper)
      }, this._renderError(errorMessage)));
    }
  }]);

  return NumberCounter;
}(React.Component);

NumberCounter.propTypes = {
  /** Prefix Classname to Element classNames */
  prefixClassName: PropTypes.string,

  /** Outermost className */
  className: PropTypes.string,

  /** Value for the Number Count */
  value: PropTypes.number,

  /** Label for the input */
  label: PropTypes.string,

  /** onChange callback */
  onChange: PropTypes.func,

  /** Error Flag */
  error: PropTypes.bool,

  /** Reason for the error */
  errorMessage: PropTypes.string,

  /** Custom Error Message Classname */
  errorMsgClassName: PropTypes.string,

  /** Maximum value for the input */
  max: PropTypes.number
};
NumberCounter.defaultProps = {
  prefixClassName: "",
  className: "",
  value: "",
  label: "",
  onChange: function onChange() {},
  error: false,
  errorMessage: "There is an error",
  errorMsgClassName: "",
  max: 10000
};
NumberCounter.classNames = {
  $prefix: "Prefix ClassName added to the Parent",
  "$prefix-label": "Added to the Label Component",
  "$prefix-wrapper": "Added to the Wrapper for Icons+Odometer",
  "$prefix-subtract": "Added to the Subtract Button",
  "$prefix-add": "Added to the Add Button",
  "$prefix-odometer": "Added to the Odometer",
  "$prefix-error": "Added to the Error Element"
};
NumberCounter.__docgenInfo = {
  "description": "",
  "methods": [{
    "name": "_renderError",
    "docblock": null,
    "modifiers": [],
    "params": [{
      "name": "errorMessage",
      "type": null
    }],
    "returns": null
  }, {
    "name": "_handleChange",
    "docblock": null,
    "modifiers": [],
    "params": [{
      "name": "change",
      "type": null
    }],
    "returns": null
  }],
  "displayName": "NumberCounter",
  "props": {
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Prefix Classname to Element classNames"
    },
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Outermost className"
    },
    "value": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "number"
      },
      "required": false,
      "description": "Value for the Number Count"
    },
    "label": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Label for the input"
    },
    "onChange": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "onChange callback"
    },
    "error": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Error Flag"
    },
    "errorMessage": {
      "defaultValue": {
        "value": "\"There is an error\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Reason for the error"
    },
    "errorMsgClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Custom Error Message Classname"
    },
    "max": {
      "defaultValue": {
        "value": "10000",
        "computed": false
      },
      "type": {
        "name": "number"
      },
      "required": false,
      "description": "Maximum value for the input"
    }
  }
};

export default NumberCounter;
